diff --git a/package-lock.json b/package-lock.json
index ab5d7d21..d7b03a92 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -5544,9 +5544,9 @@
       }
     },
     "eslint-plugin-react-hooks": {
-      "version": "2.5.1",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-2.5.1.tgz",
-      "integrity": "sha512-Y2c4b55R+6ZzwtTppKwSmK/Kar8AdLiC2f9NADCuxbcTgPPg41Gyqa6b9GppgXSvCtkRw43ZE86CT5sejKC6/g==",
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-3.0.0.tgz",
+      "integrity": "sha512-EjxTHxjLKIBWFgDJdhKKzLh5q+vjTFrqNZX36uIxWS4OfyXe5DawqPj3U5qeJ1ngLwatjzQnmR0Lz0J0YH3kxw==",
       "dev": true
     },
     "eslint-scope": {
diff --git a/package.json b/package.json
index 50a6b518..667aecf8 100644
--- a/package.json
+++ b/package.json
@@ -52,8 +52,8 @@
     "eslint-plugin-jsx-a11y": "^6.2.3",
     "eslint-plugin-prettier": "^3.1.2",
     "eslint-plugin-react": "^7.19.0",
-    "eslint-plugin-react-hooks": "^2.5.1",
+    "eslint-plugin-react-hooks": "^3.0.0",
     "postcss-cli": "^7.1.0",
     "tailwindcss": "^1.2.0"
   }
-}
\ No newline at end of file
+}
diff --git a/public/index.html b/public/index.html
index 31b9c778..f791a688 100644
--- a/public/index.html
+++ b/public/index.html
@@ -25,9 +25,13 @@
 
   <title>Reactive Resume</title>
 
+  <!-- Animate.css -->
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css" />
+
   <!-- Google Fonts -->
   <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap" rel="stylesheet">
 
+  <!-- Material Icons -->
   <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
 </head>
 
diff --git a/src/components/App/App.js b/src/components/App/App.js
index dc387d64..ceea9cdd 100644
--- a/src/components/App/App.js
+++ b/src/components/App/App.js
@@ -38,7 +38,11 @@ const App = () => {
       <LeftSidebar />
 
       <div className="z-0 h-screen col-span-3 flex justify-center items-center overflow-scroll">
-        <div id="page" className="p-10 my-auto shadow-2xl">
+        <div
+          id="page"
+          className="animated fadeIn p-10 my-auto shadow-2xl"
+          style={{ animationDelay: '500ms' }}
+        >
           {renderTemplate()}
         </div>
       </div>
diff --git a/src/components/LeftSidebar/LeftSidebar.js b/src/components/LeftSidebar/LeftSidebar.js
index 9fdbf6c7..16e08f31 100644
--- a/src/components/LeftSidebar/LeftSidebar.js
+++ b/src/components/LeftSidebar/LeftSidebar.js
@@ -31,7 +31,7 @@ const LeftSidebar = () => {
   const { state, dispatch } = context;
   const { data } = state;
 
-  const [currentTab, setCurrentTab] = useState('Languages');
+  const [currentTab, setCurrentTab] = useState('Profile');
   const onChange = (key, value) => {
     dispatch({
       type: 'on_input',
@@ -74,7 +74,7 @@ const LeftSidebar = () => {
   return (
     <div
       id="leftSidebar"
-      className="z-10 py-6 h-screen bg-white col-span-1 shadow-2xl overflow-y-scroll"
+      className="animated slideInLeft z-10 py-6 h-screen bg-white col-span-1 shadow-2xl overflow-y-scroll"
     >
       <TabBar tabs={tabs} currentTab={currentTab} setCurrentTab={setCurrentTab} />
       <div className="px-6">{renderTabs()}</div>
diff --git a/src/components/RightSidebar/RightSidebar.js b/src/components/RightSidebar/RightSidebar.js
index a6dfd443..a5278c89 100644
--- a/src/components/RightSidebar/RightSidebar.js
+++ b/src/components/RightSidebar/RightSidebar.js
@@ -45,7 +45,7 @@ const RightSidebar = () => {
   return (
     <div
       id="rightSidebar"
-      className="z-10 py-6 h-screen bg-white col-span-1 shadow-2xl overflow-y-scroll"
+      className="animated slideInRight z-10 py-6 h-screen bg-white col-span-1 shadow-2xl overflow-y-scroll"
     >
       <TabBar tabs={tabs} currentTab={currentTab} setCurrentTab={setCurrentTab} />
       <div className="px-6">{renderTabs()}</div>