diff --git a/frontend/src/scenes/popup/PopupDefaultPage.jsx b/frontend/src/scenes/popup/PopupDefaultPage.jsx
index 5da97c27..4d60e02e 100644
--- a/frontend/src/scenes/popup/PopupDefaultPage.jsx
+++ b/frontend/src/scenes/popup/PopupDefaultPage.jsx
@@ -1,94 +1,31 @@
-import React, { useState, useEffect } from 'react';
-import CreateActivityButton from "../../components/Button/CreateActivityButton/CreateActivityButton";
-import { ACTIVITY_TYPES } from "../../data/CreateActivityButtonData";
-import ParagraphCSS from "../../components/ParagraphCSS/ParagraphCSS";
+import React from 'react';
+import DefaultPageTemplate from '../../templates/DefaultPageTemplate/DefaultPageTemplate';
+import { getPopups, deletePopup } from '../../services/popupServices';
 import { useNavigate } from 'react-router-dom';
-import GuideMainPageTemplate from "../../templates/GuideMainPageTemplate/GuideMainPageTemplate";
-import { getPopups } from "../../services/popupServices"; 
 import { ACTIVITY_TYPES_INFO } from '../../data/GuideMainPageData';
-import { deletePopup } from '../../services/popupServices';
-import toastEmitter, { TOAST_EMITTER_KEY } from '../../utils/toastEmitter';
 
 const PopupDefaultPage = () => {
     const navigate = useNavigate();
-    const [popups, setPopups] = useState([]);
-    const [selectedItem, setSelectedItem] = useState(null);
-    const [isPopupOpen, setPopupOpen] = useState(false);
-    const [popupToDelete, setPopupToDelete] = useState();
-    const [popupDeleted, setPopupDeleted] = useState(false);
 
-    const handleSelect = (idItem) => {
-        setSelectedItem(idItem);
-    };
-
-    const handleDelete = async () => {
-        await deletePopup(popupToDelete)
-        setPopupOpen(false);
-        setPopupDeleted(prevState => !prevState);
-        toastEmitter.emit(TOAST_EMITTER_KEY, 'This popup is removed')
-    };
-
-    const handleOpenPopup = (id) => {
-        setPopupToDelete(id)
-        setPopupOpen(true);
-    };
-
-    const handleClosePopup = () => {
-        setPopupOpen(false);
-    };
+    const getPopupDetails = (popup) => ({
+        title: `Popup ${popup.id}`,
+        text: popup.header,
+    });
 
-    const navigateToCreate = () => {
-        navigate('/popup/create');
+    const navigateToCreate = (state) => {
+        navigate('/popup/create', state);
     };
 
-    useEffect(() => {
-        const fetchPopups = async () => {
-            try {
-                const popupData = await getPopups();
-                setPopups(popupData);
-            } catch (error) {
-                console.error("Failed to fetch popups:", error);
-            }
-        };
-
-        fetchPopups();
-    }, [popupDeleted]);
-
-    const style = {
-        display: "flex",
-        flexDirection: "column",
-        width: "100%",
-        justifyContent: "center",
-        alignItems: "center",
-    };
-
-    const items = popups.map(popups => ({
-        idItem: popups.id,
-        title: `Popup ${popups.id}`,
-        text: popups.header,
-        onDelete: () => handleOpenPopup(popups.id), // Placeholder for delete function
-        onEdit: () => navigate('/popup/create', {state:{isEdit:true, id: popups.id}}), 
-      }));
-
-
     return (
-        <>
-            {popups.length === 0 ? (
-                <div style={style}>
-                    <ParagraphCSS />
-                    <CreateActivityButton type={ACTIVITY_TYPES.POPUPS} onClick={navigateToCreate} />
-                </div>
-            ) : (
-                <GuideMainPageTemplate items={items} 
-                    handleSelect={handleSelect}
-                    handleDelete={handleDelete}
-                    isPopupOpen={isPopupOpen}
-                    handleClosePopup={handleClosePopup} 
-                    type={ACTIVITY_TYPES_INFO.POPUPS} 
-                    onClick={navigateToCreate}/>
-            )}
-        </>
+        <DefaultPageTemplate
+            getItems={getPopups}
+            deleteItem={deletePopup}
+            navigateToCreate={navigateToCreate}
+            itemType={ACTIVITY_TYPES_INFO.POPUPS}
+            itemTypeInfo={ACTIVITY_TYPES_INFO.POPUPS}
+            getItemDetails={getPopupDetails}
+        />
     );
-}
+};
 
 export default PopupDefaultPage;
diff --git a/frontend/src/templates/DefaultPageTemplate/DefaultPageTemplate.css b/frontend/src/templates/DefaultPageTemplate/DefaultPageTemplate.css
new file mode 100644
index 00000000..57af479b
--- /dev/null
+++ b/frontend/src/templates/DefaultPageTemplate/DefaultPageTemplate.css
@@ -0,0 +1,20 @@
+.fade-in {
+    animation: fadeIn 0.4s;
+    width: 100%;
+    height: 100%;
+    display: flex;
+  }
+
+
+@keyframes fadeIn {
+    0% { opacity: 0; }
+    100% { opacity: 1; }
+  }
+
+  .placeholder-style {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    justify-content: center;
+    align-items: center;
+}
diff --git a/frontend/src/templates/DefaultPageTemplate/DefaultPageTemplate.jsx b/frontend/src/templates/DefaultPageTemplate/DefaultPageTemplate.jsx
index 0d8a6e33..33587832 100644
--- a/frontend/src/templates/DefaultPageTemplate/DefaultPageTemplate.jsx
+++ b/frontend/src/templates/DefaultPageTemplate/DefaultPageTemplate.jsx
@@ -1,22 +1,27 @@
 import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
-import HomePageTemplate from '../HomePageTemplate/HomePageTemplate';
 import ParagraphCSS from '../../components/ParagraphCSS/ParagraphCSS';
 import GuideMainPageTemplate from '../GuideMainPageTemplate/GuideMainPageTemplate';
 import CreateActivityButton from '../../components/Button/CreateActivityButton/CreateActivityButton';
 import toastEmitter, { TOAST_EMITTER_KEY } from '../../utils/toastEmitter';
+import './DefaultPageTemplate.css'
 
 const DefaultPageTemplate = ({ getItems, deleteItem, navigateToCreate, itemType, itemTypeInfo, getItemDetails }) => {
     const [items, setItems] = useState([]);
     const [isPopupOpen, setPopupOpen] = useState(false);
     const [itemToDelete, setItemToDelete] = useState();
     const [itemDeleted, setItemDeleted] = useState(false);
+    const [loading, setLoading] = useState(true);
+    const [load, setLoad] = useState(true)
 
     const handleDelete = async () => {
         await deleteItem(itemToDelete);
         setPopupOpen(false);
+        if(items.length > 1){
+            setLoad(false);
+        }
         setItemDeleted(prevState => !prevState);
-        toastEmitter.emit(TOAST_EMITTER_KEY, 'This banner is removed');
+        toastEmitter.emit(TOAST_EMITTER_KEY, `This ${itemType.slice(0, -1)} is removed`);
     };
 
     const handleOpenPopup = (id) => {
@@ -31,23 +36,21 @@ const DefaultPageTemplate = ({ getItems, deleteItem, navigateToCreate, itemType,
     useEffect(() => {
         const fetchData = async () => {
             try {
+                if(load){
+                    setLoading(true); 
+                }
                 const data = await getItems();
                 setItems(data);
             } catch (error) {
                 console.error(`Failed to fetch ${itemType.toLowerCase()}s:`, error);
+            } finally {
+                setLoading(false);
+                setLoad(true);
             }
         };
         fetchData();
     }, [itemDeleted]);
 
-    const style = {
-        display: "flex",
-        flexDirection: "column",
-        width: "100%",
-        justifyContent: "center",
-        alignItems: "center",
-    };
-
     const mappedItems = items.map(item => ({
         idItem: item.id,
         ...getItemDetails(item),
@@ -57,20 +60,26 @@ const DefaultPageTemplate = ({ getItems, deleteItem, navigateToCreate, itemType,
 
     return (
         <>
-            {items.length === 0 ? (
-                <div style={style}>
-                    <ParagraphCSS />
-                    <CreateActivityButton type={itemType} onClick={navigateToCreate} />
-                </div>
+            {loading ? (
+                <div/>
             ) : (
-                <GuideMainPageTemplate
-                    items={mappedItems}
-                    handleDelete={handleDelete}
-                    isPopupOpen={isPopupOpen}
-                    handleClosePopup={handleClosePopup}
-                    type={itemTypeInfo}
-                    onClick={navigateToCreate}
-                />
+                <div className={`fade-in`}>
+                    {items.length === 0 ? (
+                        <div className={'placeholder-style'}>
+                            <ParagraphCSS />
+                            <CreateActivityButton type={itemType} onClick={navigateToCreate} />
+                        </div>
+                    ) : (
+                        <GuideMainPageTemplate
+                            items={mappedItems}
+                            handleDelete={handleDelete}
+                            isPopupOpen={isPopupOpen}
+                            handleClosePopup={handleClosePopup}
+                            type={itemTypeInfo}
+                            onClick={navigateToCreate}
+                        />
+                    )}
+                </div>
             )}
         </>
     );
@@ -85,4 +94,4 @@ DefaultPageTemplate.propTypes = {
     getItemDetails: PropTypes.func.isRequired, 
 };
 
-export default DefaultPageTemplate;
+export default DefaultPageTemplate;
\ No newline at end of file