diff --git a/packages/primevue/src/tree/Tree.vue b/packages/primevue/src/tree/Tree.vue
index 5d85437d5..ba53f9f24 100755
--- a/packages/primevue/src/tree/Tree.vue
+++ b/packages/primevue/src/tree/Tree.vue
@@ -8,7 +8,7 @@
                 </slot>
             </div>
         </template>
-        <IconField v-if="filter" :unstyled="unstyled" :pt="ptm('pcFilterContainer')">
+        <IconField v-if="filter" :unstyled="unstyled" :pt="ptm('pcFilter')" :class="cx('pcFilter')">
             <InputText v-model="filterValue" autocomplete="off" :class="cx('pcFilterInput')" :placeholder="filterPlaceholder" :unstyled="unstyled" @keydown="onFilterKeydown" :pt="ptm('pcFilterInput')" />
             <InputIcon :unstyled="unstyled" :pt="ptm('pcFilterIconContainer')">
                 <!--TODO: searchicon deprecated since v4.0-->
diff --git a/packages/primevue/src/tree/style/TreeStyle.js b/packages/primevue/src/tree/style/TreeStyle.js
index 00f87012a..1536bea3a 100644
--- a/packages/primevue/src/tree/style/TreeStyle.js
+++ b/packages/primevue/src/tree/style/TreeStyle.js
@@ -116,6 +116,10 @@ const theme = ({ dt }) => `
     color: ${dt('tree.node.icon.selected.color')};
 }
 
+.p-tree-filter {
+    margin: ${dt('tree.filter.margin')};
+}
+
 .p-tree-filter-input {
     width: 100%;
 }
@@ -162,6 +166,7 @@ const classes = {
     ],
     mask: 'p-tree-mask p-overlay-mask',
     loadingIcon: 'p-tree-loading-icon',
+    pcFilter: 'p-tree-filter',
     pcFilterInput: 'p-tree-filter-input',
     wrapper: 'p-tree-root', //TODO: discuss
     rootChildren: 'p-tree-root-children',
diff --git a/packages/primevue/src/treeselect/style/TreeSelectStyle.js b/packages/primevue/src/treeselect/style/TreeSelectStyle.js
index 0ca19b801..3ff0eedcb 100644
--- a/packages/primevue/src/treeselect/style/TreeSelectStyle.js
+++ b/packages/primevue/src/treeselect/style/TreeSelectStyle.js
@@ -107,7 +107,6 @@ const theme = ({ dt }) => `
     overflow: hidden;
 }
 
-
 .p-treeselect-tree-container {
     overflow: auto;
 }
diff --git a/packages/themes/src/presets/aura/tree/index.js b/packages/themes/src/presets/aura/tree/index.js
index a4d0d51ab..ad3e10719 100644
--- a/packages/themes/src/presets/aura/tree/index.js
+++ b/packages/themes/src/presets/aura/tree/index.js
@@ -47,5 +47,8 @@ export default {
     },
     loadingIcon: {
         size: '2rem'
+    },
+    filter: {
+        margin: '0 0 0.5rem 0'
     }
 };
diff --git a/packages/themes/src/presets/lara/tree/index.js b/packages/themes/src/presets/lara/tree/index.js
index 742911938..454080070 100644
--- a/packages/themes/src/presets/lara/tree/index.js
+++ b/packages/themes/src/presets/lara/tree/index.js
@@ -47,5 +47,8 @@ export default {
     },
     loadingIcon: {
         size: '2rem'
+    },
+    filter: {
+        margin: '0 0 0.5rem 0'
     }
 };
diff --git a/packages/themes/src/presets/material/tree/index.js b/packages/themes/src/presets/material/tree/index.js
index b0c323c99..0280ce71a 100644
--- a/packages/themes/src/presets/material/tree/index.js
+++ b/packages/themes/src/presets/material/tree/index.js
@@ -48,6 +48,9 @@ export default {
     loadingIcon: {
         size: '2rem'
     },
+    filter: {
+        margin: '0 0 0.75rem 0'
+    },
     css: ({ dt }) => `
 .p-tree-node-content {
     transition: none;
diff --git a/packages/themes/src/presets/nora/tree/index.js b/packages/themes/src/presets/nora/tree/index.js
index 44dcb6286..b32b78d4d 100644
--- a/packages/themes/src/presets/nora/tree/index.js
+++ b/packages/themes/src/presets/nora/tree/index.js
@@ -47,5 +47,8 @@ export default {
     },
     loadingIcon: {
         size: '2rem'
+    },
+    filter: {
+        margin: '0 0 0.5rem 0'
     }
 };