diff --git a/src/Components/Settings/Settings.css b/src/Components/Settings/Settings.css
index 901a3c6a..c0df9845 100644
--- a/src/Components/Settings/Settings.css
+++ b/src/Components/Settings/Settings.css
@@ -50,6 +50,7 @@
   max-width: 800px; 
   min-height: 500px;
   box-sizing: border-box;
+  animation: zoomIn 1s ease forwards;
 }
 
 .form-group {
@@ -169,3 +170,19 @@ button:hover {
     width: 100%; 
   }
 }
+.zoomIn{
+animation : zoomIn 1s ease forwards;
+}
+
+@keyframes zoomIn {
+  0% {
+    -webkit-transform: scale(0);
+    transform: scale(0);
+    opacity: 0;
+  }
+  100% {
+    -webkit-transform: scale(1);
+    transform: scale(1);
+    opacity: 1;
+  }
+}
diff --git a/src/Components/Settings/SettingsPage.js b/src/Components/Settings/SettingsPage.js
index 4663875d..4d4e66ee 100644
--- a/src/Components/Settings/SettingsPage.js
+++ b/src/Components/Settings/SettingsPage.js
@@ -2,6 +2,15 @@ import React, { useState } from "react";
 import "./Settings.css";
 import { Link } from "react-router-dom";
 import { FaArrowLeft } from "react-icons/fa";
+import React, { useState, useEffect } from "react";
+useEffect(() => {
+  document.body.classList.add("zoomIn");
+
+  return () => {
+    document.body.classList.remove("zoomIn");
+  };
+}, []);
+
 
 const SettingsPage = () => {
   const [activeTab, setActiveTab] = useState("profile");