diff --git a/ui/src/app/applications/components/application-details/application-details.scss b/ui/src/app/applications/components/application-details/application-details.scss
index 71eaf2f545d5d..c73fd9537f52d 100644
--- a/ui/src/app/applications/components/application-details/application-details.scss
+++ b/ui/src/app/applications/components/application-details/application-details.scss
@@ -206,4 +206,65 @@ $header: 120px;
             top: 280px;
         }
     }
+
+    .graph-options-panel {
+        margin-left: 10px;
+        z-index: 10;
+        padding: 5px;
+        display: inline-block;
+        background-color: $argo-color-gray-1;
+        box-shadow: 1px 1px 3px $argo-color-gray-5;
+        position: fixed;
+      
+        a {
+            padding: 5px;
+            margin: 2px;
+            color: $argo-color-gray-6;
+            border: 1px solid transparent;
+            border-radius: 5px;
+
+            &.group-nodes-button {
+                cursor: pointer;
+                position: relative;
+                display: inline-block;
+                vertical-align: middle;
+                font-size: 13px;
+                font-weight: 500;
+                line-height: 1.4;
+                text-align: center;
+                user-select: none;
+                transition: background-color .2s, border .2s, color .2s;
+                text-transform: uppercase;
+                &:hover {
+                    background-color: #d1d5d9;
+                }
+                &:active {
+                    transition: background-color .2s, border .2s, color .2s;
+                    border: 1px $argo-color-teal-5 solid;
+                }
+            }
+        
+            &.group-nodes-button-on {
+                color: $argo-color-gray-1;
+                background-color: $argo-color-gray-6;
+                &:hover {
+                    background-color: $argo-color-gray-5;
+                }
+            }    
+        }
+
+        .zoom-value {
+            user-select: none;
+            margin-top: 3px;
+            margin-right: 6px;
+            margin-left: 4px;
+            font-size: 14px;
+            text-align-last: right;
+            float: right;
+            width: 40px;
+            border: 1px $argo-color-gray-5 solid;
+            background-color: $argo-color-gray-3;
+            padding: 2px;
+        }
+     }  
 }
diff --git a/ui/src/app/applications/components/application-details/application-details.tsx b/ui/src/app/applications/components/application-details/application-details.tsx
index 0ff119030af32..430149b8cba9f 100644
--- a/ui/src/app/applications/components/application-details/application-details.tsx
+++ b/ui/src/app/applications/components/application-details/application-details.tsx
@@ -34,6 +34,7 @@ interface ApplicationDetailsState {
     revision?: string;
     groupedResources?: ResourceStatus[];
     slidingPanelPage?: number;
+    zoom?: number;
 }
 
 interface FilterInput {
@@ -68,7 +69,7 @@ export class ApplicationDetails extends React.Component<RouteComponentProps<{nam
 
     constructor(props: RouteComponentProps<{name: string}>) {
         super(props);
-        this.state = {page: 0, groupedResources: [], slidingPanelPage: 0};
+        this.state = {page: 0, groupedResources: [], slidingPanelPage: 0, zoom: 1.0};
     }
 
     private get showOperationState() {
@@ -211,6 +212,16 @@ export class ApplicationDetails extends React.Component<RouteComponentProps<{nam
                                     )
                                 );
                             const {Tree, Pods, Network, List} = AppsDetailsViewKey;
+                            const zoomNum = (this.state.zoom * 100).toFixed(0);
+                            const setZoom = (s: number) => {
+                                let targetZoom: number = this.state.zoom + s;
+                                if (targetZoom <= 0.05) {
+                                    targetZoom = 0.1;
+                                } else if (targetZoom > 2.0) {
+                                    targetZoom = 2.0;
+                                }
+                                this.setState({zoom: targetZoom});
+                            };
                             return (
                                 <div className='application-details'>
                                     <Page
@@ -274,15 +285,23 @@ export class ApplicationDetails extends React.Component<RouteComponentProps<{nam
                                             {refreshing && <p className='application-details__refreshing-label'>Refreshing</p>}
                                             {((pref.view === 'tree' || pref.view === 'network') && (
                                                 <Filters pref={pref} tree={tree} onSetFilter={setFilter} onClearFilter={clearFilter}>
-                                                    {pref.view === 'tree' && (
-                                                        <button
-                                                            className={`argo-button argo-button--base${!pref.groupNodes ? '-o' : ''}`}
-                                                            style={{border: 'none', width: '160px'}}
-                                                            onClick={() => this.toggleCompactView(pref)}>
-                                                            <i className={classNames('fa fa-object-group')} style={{width: '15px', marginRight: '5px'}} />
-                                                            Group Nodes
-                                                        </button>
-                                                    )}
+                                                    <div className='graph-options-panel'>
+                                                        {pref.view === 'tree' && (
+                                                            <a
+                                                                className={`group-nodes-button group-nodes-button${!pref.groupNodes ? '' : '-on'}`}
+                                                                title='Group Nodes'
+                                                                onClick={() => this.toggleCompactView(pref)}>
+                                                                <i className={classNames('fa fa-object-group fa-fw')} />
+                                                            </a>
+                                                        )}
+                                                        <a className={`group-nodes-button`} onClick={() => setZoom(0.1)} title='Zoom in'>
+                                                            <i className='fa fa-search-plus fa-fw' />
+                                                        </a>
+                                                        <a className={`group-nodes-button`} onClick={() => setZoom(-0.1)} title='Zoom out'>
+                                                            <i className='fa fa-search-minus fa-fw' />
+                                                        </a>
+                                                        <div className={`zoom-value`}>{zoomNum}%</div>
+                                                    </div>
                                                     <ApplicationResourceTree
                                                         nodeFilter={node => this.filterTreeNode(node, treeFilter)}
                                                         selectedNodeFullName={this.selectedNodeKey}
@@ -299,6 +318,7 @@ export class ApplicationDetails extends React.Component<RouteComponentProps<{nam
                                                         useNetworkingHierarchy={pref.view === 'network'}
                                                         onClearFilter={clearFilter}
                                                         onGroupdNodeClick={groupdedNodeIds => openGroupNodeDetails(groupdedNodeIds)}
+                                                        zoom={this.state.zoom}
                                                     />
                                                 </Filters>
                                             )) ||
diff --git a/ui/src/app/applications/components/application-resource-tree/application-resource-tree.tsx b/ui/src/app/applications/components/application-resource-tree/application-resource-tree.tsx
index 53d1abfa64dab..d298eac28f8d8 100644
--- a/ui/src/app/applications/components/application-resource-tree/application-resource-tree.tsx
+++ b/ui/src/app/applications/components/application-resource-tree/application-resource-tree.tsx
@@ -43,6 +43,7 @@ export interface ApplicationResourceTreeProps {
     onClearFilter: () => any;
     showOrphanedResources: boolean;
     showCompactNodes: boolean;
+    zoom: number;
 }
 
 interface Line {
@@ -644,7 +645,7 @@ export const ApplicationResourceTree = (props: ApplicationResourceTreeProps) =>
         )) || (
             <div
                 className={classNames('application-resource-tree', {'application-resource-tree--network': props.useNetworkingHierarchy})}
-                style={{width: size.width + 150, height: size.height + 250}}>
+                style={{width: size.width + 150, height: size.height + 250, transformOrigin: '0% 0%', transform: `scale(${props.zoom})`}}>
                 {graphNodes.map(key => {
                     const node = graph.node(key);
                     const nodeType = node.type;