diff --git a/components/common/Modal.tsx b/components/common/Modal.tsx
index 3dbc68a..e001b7a 100644
--- a/components/common/Modal.tsx
+++ b/components/common/Modal.tsx
@@ -30,7 +30,7 @@ const Modal = ({ children, width = '1/2', closeModal, title }:ModalProps) => {
    return (
       <div className='modal fixed top-0 left-0 bg-white/[.7] w-full h-screen z-50' onClick={closeOnBGClick}>
          <div
-         className={` max-w-[340px] absolute top-1/4 left-0 right-0 ml-auto mr-auto w-${width} 
+         className={`modal__content max-w-[340px] absolute top-1/4 left-0 right-0 ml-auto mr-auto w-${width} 
          lg:max-w-md bg-white shadow-md rounded-md p-5 border-t-[1px] border-gray-100 text-base`}>
             {title && <h3 className=' font-semibold mb-3'>{title}</h3>}
             <button
diff --git a/components/domains/DomainSettings.tsx b/components/domains/DomainSettings.tsx
index 3c63ee0..90d4373 100644
--- a/components/domains/DomainSettings.tsx
+++ b/components/domains/DomainSettings.tsx
@@ -5,7 +5,7 @@ import Modal from '../common/Modal';
 import { useDeleteDomain, useUpdateDomain } from '../../services/domains';
 
 type DomainSettingsProps = {
-   domain:Domain,
+   domain:Domain|false,
    domains: Domain[],
    closeModal: Function
 }
@@ -24,15 +24,17 @@ const DomainSettings = ({ domain, domains, closeModal }: DomainSettingsProps) =>
    const { mutate: updateMutate } = useUpdateDomain(() => closeModal(false));
    const { mutate: deleteMutate } = useDeleteDomain(() => {
       closeModal(false);
-      const fitleredDomains = domains.filter((d:Domain) => d.domain !== domain.domain);
-      if (fitleredDomains[0] && fitleredDomains[0].slug) {
+      const fitleredDomains = domain && domains.filter((d:Domain) => d.domain !== domain.domain);
+      if (fitleredDomains && fitleredDomains[0] && fitleredDomains[0].slug) {
          router.push(`/domain/${fitleredDomains[0].slug}`);
       }
    });
 
    useEffect(() => {
-      setDomainSettings({ notification_interval: domain.notification_interval, notification_emails: domain.notification_emails });
-   }, [domain.notification_interval, domain.notification_emails]);
+      if (domain) {
+         setDomainSettings({ notification_interval: domain.notification_interval, notification_emails: domain.notification_emails });
+      }
+   }, [domain]);
 
    const updateNotiEmails = (event:React.FormEvent<HTMLInputElement>) => {
       setDomainSettings({ ...domainSettings, notification_emails: event.currentTarget.value });
@@ -55,9 +57,9 @@ const DomainSettings = ({ domain, domains, closeModal }: DomainSettingsProps) =>
          setTimeout(() => {
             setSettingsError({ type: '', msg: '' });
          }, 3000);
-      } else {
-         updateMutate({ domainSettings, domain });
-      }
+      } else if (domain) {
+            updateMutate({ domainSettings, domain });
+         }
    };
 
    return (
@@ -91,7 +93,7 @@ const DomainSettings = ({ domain, domains, closeModal }: DomainSettingsProps) =>
                </button>
             </div>
          </Modal>
-         {showRemoveDomain && (
+         {showRemoveDomain && domain && (
             <Modal closeModal={() => setShowRemoveDomain(false) } title={`Remove Domain ${domain.domain}`}>
                <div className='text-sm'>
                   <p>Are you sure you want to remove this Domain? Removing this domain will remove all its keywords.</p>
diff --git a/components/keywords/KeywordsTable.tsx b/components/keywords/KeywordsTable.tsx
index f5fc915..31adaaf 100644
--- a/components/keywords/KeywordsTable.tsx
+++ b/components/keywords/KeywordsTable.tsx
@@ -1,5 +1,6 @@
 import React, { useState, useMemo } from 'react';
 import { Toaster } from 'react-hot-toast';
+import { CSSTransition } from 'react-transition-group';
 import AddKeywords from './AddKeywords';
 import { filterKeywords, keywordsByDevice, sortKeywords } from '../../utils/sortFilter';
 import Icon from '../common/Icon';
@@ -156,13 +157,13 @@ const KeywordsTable = ({ domain, keywords = [], isLoading = true, showAddModal =
                   </div>
             </Modal>
          )}
-         {showAddModal && domain && (
+         <CSSTransition in={showAddModal} timeout={300} classNames="modal_anim" unmountOnExit mountOnEnter>
             <AddKeywords
-               domain={domain.domain}
+               domain={domain?.domain || ''}
                keywords={keywords}
                closeModal={() => setShowAddModal(false)}
                />
-         )}
+         </CSSTransition>
          {showTagManager && (
             <KeywordTagManager
                allTags={allDomainTags}
diff --git a/package-lock.json b/package-lock.json
index d398a07..8994b22 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,6 +9,7 @@
       "version": "0.1.0",
       "dependencies": {
         "@testing-library/react": "^13.4.0",
+        "@types/react-transition-group": "^4.4.5",
         "axios": "^1.1.3",
         "axios-retry": "^3.3.1",
         "chart.js": "^3.9.1",
@@ -31,6 +32,7 @@
         "react-hot-toast": "^2.4.0",
         "react-query": "^3.39.2",
         "react-timeago": "^7.1.0",
+        "react-transition-group": "^4.4.5",
         "reflect-metadata": "^0.1.13",
         "sequelize": "^6.25.2",
         "sequelize-typescript": "^2.1.5",
@@ -1998,6 +2000,14 @@
         "@types/react": "*"
       }
     },
+    "node_modules/@types/react-transition-group": {
+      "version": "4.4.5",
+      "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.5.tgz",
+      "integrity": "sha512-juKD/eiSM3/xZYzjuzH6ZwpP+/lejltmiS3QEzV/vmb/Q8+HfDmxu+Baga8UEMGBqV88Nbg4l2hY/K2DkyaLLA==",
+      "dependencies": {
+        "@types/react": "*"
+      }
+    },
     "node_modules/@types/scheduler": {
       "version": "0.16.2",
       "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz",
@@ -3622,6 +3632,15 @@
       "resolved": "https://registry.npmjs.org/dom-accessibility-api/-/dom-accessibility-api-0.5.14.tgz",
       "integrity": "sha512-NMt+m9zFMPZe0JcY9gN224Qvk6qLIdqex29clBvc/y75ZBX9YA9wNK3frsYvu2DI1xcCIwxwnX+TlsJ2DSOADg=="
     },
+    "node_modules/dom-helpers": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz",
+      "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==",
+      "dependencies": {
+        "@babel/runtime": "^7.8.7",
+        "csstype": "^3.0.2"
+      }
+    },
     "node_modules/dom-serializer": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-2.0.0.tgz",
@@ -8393,7 +8412,6 @@
       "version": "15.8.1",
       "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
       "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
-      "dev": true,
       "dependencies": {
         "loose-envify": "^1.4.0",
         "object-assign": "^4.1.1",
@@ -8508,8 +8526,7 @@
     "node_modules/react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
-      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
-      "dev": true
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
     },
     "node_modules/react-query": {
       "version": "3.39.2",
@@ -8544,6 +8561,21 @@
         "react": "^16.0.0 || ^17.0.0 || ^18.0.0"
       }
     },
+    "node_modules/react-transition-group": {
+      "version": "4.4.5",
+      "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",
+      "integrity": "sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==",
+      "dependencies": {
+        "@babel/runtime": "^7.5.5",
+        "dom-helpers": "^5.0.1",
+        "loose-envify": "^1.4.0",
+        "prop-types": "^15.6.2"
+      },
+      "peerDependencies": {
+        "react": ">=16.6.0",
+        "react-dom": ">=16.6.0"
+      }
+    },
     "node_modules/read-cache": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
@@ -11599,6 +11631,14 @@
         "@types/react": "*"
       }
     },
+    "@types/react-transition-group": {
+      "version": "4.4.5",
+      "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.5.tgz",
+      "integrity": "sha512-juKD/eiSM3/xZYzjuzH6ZwpP+/lejltmiS3QEzV/vmb/Q8+HfDmxu+Baga8UEMGBqV88Nbg4l2hY/K2DkyaLLA==",
+      "requires": {
+        "@types/react": "*"
+      }
+    },
     "@types/scheduler": {
       "version": "0.16.2",
       "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz",
@@ -12782,6 +12822,15 @@
       "resolved": "https://registry.npmjs.org/dom-accessibility-api/-/dom-accessibility-api-0.5.14.tgz",
       "integrity": "sha512-NMt+m9zFMPZe0JcY9gN224Qvk6qLIdqex29clBvc/y75ZBX9YA9wNK3frsYvu2DI1xcCIwxwnX+TlsJ2DSOADg=="
     },
+    "dom-helpers": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz",
+      "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==",
+      "requires": {
+        "@babel/runtime": "^7.8.7",
+        "csstype": "^3.0.2"
+      }
+    },
     "dom-serializer": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-2.0.0.tgz",
@@ -16270,7 +16319,6 @@
       "version": "15.8.1",
       "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
       "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
-      "dev": true,
       "requires": {
         "loose-envify": "^1.4.0",
         "object-assign": "^4.1.1",
@@ -16346,8 +16394,7 @@
     "react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
-      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
-      "dev": true
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
     },
     "react-query": {
       "version": "3.39.2",
@@ -16365,6 +16412,17 @@
       "integrity": "sha512-rouF7MiEm55fH791Y8cg+VobIJgx8gtNJ+gjr86R4ZqO1WKPkXiXjdT/lRzrvEkUzsxT1exHqV2V+Zdi114H3A==",
       "requires": {}
     },
+    "react-transition-group": {
+      "version": "4.4.5",
+      "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",
+      "integrity": "sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==",
+      "requires": {
+        "@babel/runtime": "^7.5.5",
+        "dom-helpers": "^5.0.1",
+        "loose-envify": "^1.4.0",
+        "prop-types": "^15.6.2"
+      }
+    },
     "read-cache": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
diff --git a/package.json b/package.json
index 725aef8..94bf02a 100644
--- a/package.json
+++ b/package.json
@@ -7,7 +7,7 @@
     "build": "next build",
     "start": "next start",
     "cron": "node cron.js",
-    "start:all": "concurrently npm:start npm:cron", 
+    "start:all": "concurrently npm:start npm:cron",
     "lint": "next lint",
     "test": "jest --watch --verbose",
     "test:ci": "jest --ci",
@@ -15,6 +15,7 @@
   },
   "dependencies": {
     "@testing-library/react": "^13.4.0",
+    "@types/react-transition-group": "^4.4.5",
     "axios": "^1.1.3",
     "axios-retry": "^3.3.1",
     "chart.js": "^3.9.1",
@@ -37,6 +38,7 @@
     "react-hot-toast": "^2.4.0",
     "react-query": "^3.39.2",
     "react-timeago": "^7.1.0",
+    "react-transition-group": "^4.4.5",
     "reflect-metadata": "^0.1.13",
     "sequelize": "^6.25.2",
     "sequelize-typescript": "^2.1.5",
diff --git a/pages/domain/[slug]/index.tsx b/pages/domain/[slug]/index.tsx
index af69f8e..1061b43 100644
--- a/pages/domain/[slug]/index.tsx
+++ b/pages/domain/[slug]/index.tsx
@@ -4,6 +4,7 @@ import Head from 'next/head';
 import { useRouter } from 'next/router';
 // import { useQuery } from 'react-query';
 // import toast from 'react-hot-toast';
+import { CSSTransition } from 'react-transition-group';
 import Sidebar from '../../../components/common/Sidebar';
 import TopBar from '../../../components/common/TopBar';
 import DomainHeader from '../../../components/domains/DomainHeader';
@@ -81,15 +82,21 @@ const SingleDomain: NextPage = () => {
                />
             </div>
          </div>
-         {showAddDomain && <AddDomain closeModal={() => setShowAddDomain(false)} />}
-         {showDomainSettings && theDomains && activDomain && activDomain.domain
-         && <DomainSettings
-            domain={activDomain}
+
+         <CSSTransition in={showAddDomain} timeout={300} classNames="modal_anim" unmountOnExit mountOnEnter>
+            <AddDomain closeModal={() => setShowAddDomain(false)} />
+         </CSSTransition>
+
+         <CSSTransition in={showDomainSettings} timeout={300} classNames="modal_anim" unmountOnExit mountOnEnter>
+            <DomainSettings
+            domain={showDomainSettings && theDomains && activDomain && activDomain.domain ? activDomain : false}
             domains={theDomains}
             closeModal={setShowDomainSettings}
             />
-         }
-         {showSettings && <Settings closeSettings={() => setShowSettings(false)} />}
+         </CSSTransition>
+         <CSSTransition in={showSettings} timeout={300} classNames="settings_anim" unmountOnExit mountOnEnter>
+             <Settings closeSettings={() => setShowSettings(false)} />
+         </CSSTransition>
       </div>
    );
 };
diff --git a/styles/globals.css b/styles/globals.css
index f8e2333..44aab96 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -94,4 +94,56 @@ body{
 .settings__content{
    height: calc(100vh - 185px);
    overflow: auto;
+}
+
+
+/* Animation */
+.modal_anim-enter {
+   opacity: 0;
+}
+.modal_anim-enter-active {
+   opacity: 1;
+   transition: opacity 300ms;
+}
+.modal_anim-enter .modal__content{
+   transform: translateY(50px);
+}
+.modal_anim-enter-active .modal__content{
+   transform: translateY(0);
+   transition: all 300ms;
+}
+
+.modal_anim-exit {
+   opacity: 1;
+}
+.modal_anim-exit-active {
+   opacity: 0;
+   transition: all 300ms;
+}
+.modal_anim-exit .modal__content{
+   transform: translateY(0px);
+}
+.modal_anim-exit-active .modal__content{
+   transform: translateY(50px);
+   transition: all 300ms;
+}
+
+
+.settings_anim-enter {
+   opacity: 0;
+   transform: translateX(400px);
+}
+.settings_anim-enter-active {
+   opacity: 1;
+   transform: translateX(0);
+   transition: all 300ms;
+}
+.settings_anim-exit {
+   opacity: 1;
+   transform: translateX(0);
+}
+.settings_anim-exit-active {
+   opacity: 0;
+   transform: translateX(400px);
+   transition: all 300ms;
 }
\ No newline at end of file