diff --git a/frontend/src/components/pages/ModuleResources/style.module.scss b/frontend/src/components/pages/ModuleResources/style.module.scss
index bc6679ff88dc08f2a1917a4067ead47f1e7cc435..5315e907bd1e4c56ca09f8e1a8ed7ef7efad47da 100644
--- a/frontend/src/components/pages/ModuleResources/style.module.scss
+++ b/frontend/src/components/pages/ModuleResources/style.module.scss
@@ -11,10 +11,10 @@
 .searchBar {
   border-radius: 8px;
   background-color: $gray-100;
-  border-color: $gray-100;
-  transition: 0.5s border-color;
-  -webkit-transition: 0.5s border-color;
-  -moz-transition: 0.5s border-color;
+	border-color: $gray-100;
+	transition: 0s all;
+  -webkit-transition: 0s all;
+  -moz-transition: 0s all;
 }
 
 .serachBar::placeholder {
@@ -22,10 +22,19 @@
   opacity: 1;
 }
 
-.searchBar:focus {
-  box-shadow: none !important;
+.searchBar:focus + :global(.input-group-append) .searchBarIcon{
+	box-shadow: none !important;
+	border-left: none;
+  border-color: $gray-300;
+	background-color: $white;
+}
+
+
+.searchBar:focus{
+	box-shadow: none !important;
+	border-right: none;
   border-color: $gray-300;
-  background-color: $white;
+	background-color: $white;
 }
 
 .searchBarIcon {
@@ -33,12 +42,13 @@
   background-color: $gray-100;
   border-color: $gray-100;
   color: $gray-500;
-  transition: 0.2s background;
-  -webkit-transition: 0.2s background;
-  -moz-transition: 0.2s background;
+  transition: 0s all;
+  -webkit-transition: 0s all;
+  -moz-transition: 0s all;
   margin-left: 1px;
 }
 
+
 .searchBarIcon:hover {
   background: $gray-200;
   color: $gray-700 !important;