diff --git a/src/main/resources/static/css/home.css b/src/main/resources/static/css/home.css
index f7549167..9bd1ce70 100644
--- a/src/main/resources/static/css/home.css
+++ b/src/main/resources/static/css/home.css
@@ -27,6 +27,8 @@
     align-items: flex-start;
     background: rgba(13, 110, 253, 0.05); 
     transition: transform 0.3s, border 0.3s;
+    transform-origin: center center;
+    outline: 2px solid transparent; 
 }
 
 .feature-card a {
@@ -43,7 +45,7 @@
 }
 
 .feature-card:hover {
-    border: 1px solid rgba(0, 0, 0, .5);
+    outline: 1px solid rgba(0, 0, 0, .5);
     cursor: pointer;
     transform: scale(1.1);
 }
diff --git a/src/main/resources/templates/home.html b/src/main/resources/templates/home.html
index 2122f011..4365bcba 100644
--- a/src/main/resources/templates/home.html
+++ b/src/main/resources/templates/home.html
@@ -23,6 +23,7 @@
             <script src="js/homecard.js"></script>
             	
             <div class=" container">
+            <br>
             <input type="text" id="searchBar" onkeyup="filterCards()" placeholder="Search for features...">
             <div class="features-container ">