diff --git a/index.css b/index.css
index ab95e097..67dc80c2 100644
--- a/index.css
+++ b/index.css
@@ -6,6 +6,8 @@ body {
     color: #000;
     margin: 0;
     padding: 0;
+    
+    transition: background-color 0.3s ease-in-out;
 }
 
 .info>div {
@@ -37,6 +39,7 @@ body {
     padding: 6px;
     border: none;
     background-color: transparent;
+    transition: border 0.3s ease-in-out;
 }
 
 #input_data:focus {
@@ -113,7 +116,7 @@ body {
     margin-bottom: 20px;
     margin-left: 0px;
     margin-right: 20px;
-
+    animation: fade-in 1s ease-in-out;
 }
 
 #category-grid .card {
@@ -138,6 +141,7 @@ body {
     width: 330px;
     border-radius: 20px;
     object-fit: fill;
+    transition: transform 0.3s ease-in-out;
 }
 
 #category-grid .cartbtn {
@@ -155,6 +159,7 @@ body {
     background-color: #f1dede;
     margin-left: 5px;
     margin-bottom: 8px;
+    transition: background-color 0.3s ease-in-out;
 
 }
 
@@ -170,6 +175,7 @@ body {
     height: 100%;
     object-fit: cover;
     transition: transform 0.3s ease 0.1s, width 2s, height 2.5s;
+    animation: zoomIn 1s ease-in-out;
 
 
 }
@@ -444,6 +450,24 @@ footer {
     }
 }
 
+@keyframes fade-in {
+    from {
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
+    }
+}
+
+@keyframes zoomIn {
+    from {
+        transform: scale(0.8);
+    }
+    to {
+        transform: scale(1);
+    }
+}
+
 /* Footer styles
 /* footer {
     background-color: black;