diff --git a/src/App.jsx b/src/App.jsx
index 44056e1..d346956 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,4 +1,6 @@
-import React from 'react';
+import React, {
+  useEffect,
+} from 'react';
 import Body from './Body';
 import {
   BrowserRouter,
@@ -9,9 +11,16 @@ import ErrorPage from './components/ErrorPage';
 import About from './pages/About';
 import Landing from './pages/Home';
 import Student from './pages/Student';
-import Album_Image from './pages/Album_Image';
-import ContactUs from './components/ContactUs';
+import Album_Image from './components/Album_Image_Components/Album_Image';
+import ContactUs from './pages/ContactUs';
+import Loader from './components/Loader';
 const App = () => {
+  useEffect(() => {
+    window.onload = () => {
+      return <Loader />;
+    };
+  }, []);
+
   return (
     <>
       <BrowserRouter basename='/'>
diff --git a/src/components/Album_Image_Components/Album_Image.jsx b/src/components/Album_Image_Components/Album_Image.jsx
new file mode 100644
index 0000000..a5e7d83
--- /dev/null
+++ b/src/components/Album_Image_Components/Album_Image.jsx
@@ -0,0 +1,32 @@
+import axios from 'axios';
+import React from 'react';
+import { useParams } from 'react-router-dom';
+import Swal from 'sweetalert2';
+
+const Album_Image = () => {
+  let parms = useParams();
+  let name = parms.name;
+
+  let Find_Image = async () => {
+    try {
+      // let res = await axios.get(`/api/image/${name}`)
+    } catch (error) {
+      console.log(error);
+      Swal.fire(() => {
+        icon: 'error';
+        title: 'Oops...';
+        text: error.message;
+      });
+    }
+  };
+
+  Find_Image();
+
+  return (
+    <div>
+      Album_Image <h1>{name}</h1>
+    </div>
+  );
+};
+
+export default Album_Image;
diff --git a/src/components/Loader.jsx b/src/components/Loader.jsx
index b85f855..fcfe0a6 100644
--- a/src/components/Loader.jsx
+++ b/src/components/Loader.jsx
@@ -1,6 +1,7 @@
 import React, { useRef } from 'react';
 import gsap from 'gsap';
 import { useGSAP } from '@gsap/react';
+import { useSelector } from 'react-redux';
 
 const Loader = () => {
   let loader = useRef();
diff --git a/src/components/aboutComponents/AboutHero.jsx b/src/components/aboutComponents/AboutHero.jsx
index c9c7266..7715acc 100644
--- a/src/components/aboutComponents/AboutHero.jsx
+++ b/src/components/aboutComponents/AboutHero.jsx
@@ -5,6 +5,7 @@ import React, {
 import About_BG from '../../assets/images/aboutbg.svg';
 import Loader from '../Loader';
 import { useSelector } from 'react-redux';
+import useAbout from '../../hooks/useAbout';
 
 const AboutHero = () => {
   const [image, setimage] =
@@ -13,6 +14,8 @@ const AboutHero = () => {
   const [heading, setheading] =
     useState('');
 
+  useAbout();
+
   let about = useSelector(
     state => state.about.aboutPage,
   );
@@ -28,9 +31,7 @@ const AboutHero = () => {
       );
     }
   }, [about]);
-  return !about ? (
-    <Loader />
-  ) : (
+  return (
     <section className='bg-black w-full text-white'>
       <div className='about_hero relative w-full h-[90vh] bg-gradient-to-b from-white via-gray-700 to-black'>
         <img
diff --git a/src/components/aboutComponents/CampusFacilities.jsx b/src/components/aboutComponents/CampusFacilities.jsx
index 0267e30..f0f5324 100644
--- a/src/components/aboutComponents/CampusFacilities.jsx
+++ b/src/components/aboutComponents/CampusFacilities.jsx
@@ -6,6 +6,7 @@ import { Link } from 'react-router-dom';
 import bulletPoint from '../../assets/images/bulletPoint.svg';
 import { useSelector } from 'react-redux';
 import { use } from 'react';
+import useAbout from '../../hooks/useAbout';
 
 export let Facilites_Card = ({
   Title,
@@ -34,6 +35,8 @@ const CampusFacilities = () => {
   const [Description, setDescription] =
     useState({});
 
+  useAbout();
+
   let About_Page_Data = useSelector(
     state => state.about.aboutPage,
   );
diff --git a/src/components/aboutComponents/Teachers.jsx b/src/components/aboutComponents/Teachers.jsx
index cdf8723..665484a 100644
--- a/src/components/aboutComponents/Teachers.jsx
+++ b/src/components/aboutComponents/Teachers.jsx
@@ -1,4 +1,7 @@
-import React from 'react';
+import React, {
+  useEffect,
+  useState,
+} from 'react';
 import {
   Swiper,
   SwiperSlide,
@@ -14,6 +17,7 @@ import 'swiper/css/navigation';
 import { useSelector } from 'react-redux';
 import { Link } from 'react-router-dom';
 import useTeacher from '../../hooks/useTeacher';
+import Loader from '../Loader';
 
 const TeacherCard = ({ teacher }) => (
   <div className='card w-[25%] max-[599px]:w-full h-full bg-white text-black flex items-start p-4 justify-between flex-col gap-2 rounded-xl  max-[1098px]:w-[40%]'>
@@ -128,11 +132,24 @@ const TeacherCard = ({ teacher }) => (
 );
 
 const Teachers = () => {
-  const teachers = useSelector(
+  let [teachers, SetTeacher] =
+    useState();
+
+  useTeacher();
+
+  const data = useSelector(
     state => state.about.teacher,
   );
 
-  useTeacher();
+  useEffect(() => {
+    if (data) {
+      SetTeacher([...data]);
+    }
+  }, [data]);
+
+  {
+    !data && <Loader />;
+  }
 
   return (
     <section className='w-full px-10 py-10 max-[599px]:py-6 flex items-center justify-between gap-4 flex-col bg-[#333] text-white overflow-hidden'>
diff --git a/src/components/Album.jsx b/src/components/homeComponents/Album.jsx
similarity index 98%
rename from src/components/Album.jsx
rename to src/components/homeComponents/Album.jsx
index 7ef31b4..cf3ca4b 100644
--- a/src/components/Album.jsx
+++ b/src/components/homeComponents/Album.jsx
@@ -4,7 +4,7 @@ import {
   useState,
 } from 'react';
 import { Link } from 'react-router-dom';
-import useAlbum from '../hooks/useAlbum';
+import useAlbum from '../../hooks/useAlbum';
 import { useSelector } from 'react-redux';
 
 const Album = () => {
diff --git a/src/components/homeComponents/Hero.jsx b/src/components/homeComponents/Hero.jsx
index a04c162..95f38d1 100644
--- a/src/components/homeComponents/Hero.jsx
+++ b/src/components/homeComponents/Hero.jsx
@@ -5,25 +5,23 @@ import React, {
   useState,
 } from 'react';
 import Loader from '../Loader';
+import useHomeUi from '../../hooks/useHomeUi';
 
 const Hero = () => {
   let [image, setImage] = useState();
+
   const [heading, setHeading] =
     useState();
   const [Paragraph, setParagraph] =
     useState();
 
+  useHomeUi();
+
   let hero = useSelector(
     state => state.home.landingPage,
   );
 
   useEffect(() => {
-    setImage('');
-    setHeading('');
-    setParagraph(
-      'Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo, nemo.',
-    );
-
     if (hero) {
       let data = hero.HeroSection;
       setImage(
@@ -34,9 +32,7 @@ const Hero = () => {
     }
   }, [hero]);
 
-  return !hero ? (
-    <Loader />
-  ) : (
+  return (
     <section
       className='w-full min-h-screen flex flex-col lg:flex-row items-center justify-center text-white bg-cover bg-no-repeat px-10 relative overflow-clip'
       style={{
diff --git a/src/components/Testimonials.jsx b/src/components/homeComponents/Testimonials.jsx
similarity index 98%
rename from src/components/Testimonials.jsx
rename to src/components/homeComponents/Testimonials.jsx
index 99ab1e1..3cc51e1 100644
--- a/src/components/Testimonials.jsx
+++ b/src/components/homeComponents/Testimonials.jsx
@@ -6,10 +6,12 @@ import Slider from 'react-slick';
 import 'slick-carousel/slick/slick.css';
 import 'slick-carousel/slick/slick-theme.css';
 
-import useTestimonial from '../hooks/useTestimoniyal';
+import useTestimonial from '../../hooks/useTestimoniyal';
 import { useSelector } from 'react-redux';
 
 const Testimonials = () => {
+  useTestimonial();
+
   let testimonial = useSelector(
     state => state.home.Testimonital,
   );
@@ -19,8 +21,6 @@ const Testimonials = () => {
     setTestimonials,
   ] = useState([]);
 
-  useTestimonial();
-
   useEffect(() => {
     if (testimonial) {
       setTestimonials([...testimonial]);
diff --git a/src/main.jsx b/src/main.jsx
index ccdac16..ca46bab 100644
--- a/src/main.jsx
+++ b/src/main.jsx
@@ -6,6 +6,7 @@ import { Provider } from 'react-redux';
 import App from './App';
 import { HelmetProvider } from 'react-helmet-async';
 import Lenis from 'lenis';
+import Loader from './components/Loader';
 
 // Initialize Lenis
 const lenis = new Lenis({
diff --git a/src/pages/About.jsx b/src/pages/About.jsx
index 996d898..48cd3e2 100644
--- a/src/pages/About.jsx
+++ b/src/pages/About.jsx
@@ -5,8 +5,21 @@ import AboutHero from '../components/aboutComponents/AboutHero';
 import Teachers from '../components/aboutComponents/Teachers';
 import Courses from '../components/aboutComponents/Courses';
 import CampusFacilities from '../components/aboutComponents/CampusFacilities';
+import { useSelector } from 'react-redux';
+import useAbout from '../hooks/useAbout';
+import Loader from '../components/Loader';
 
 const About = () => {
+  useAbout();
+
+  let about = useSelector(
+    state => state.about.aboutPage,
+  );
+
+  if (!about) {
+    return <Loader />;
+  }
+
   return (
     <>
       <Helmet>
diff --git a/src/pages/Album_Image.jsx b/src/pages/Album_Image.jsx
deleted file mode 100644
index b2026aa..0000000
--- a/src/pages/Album_Image.jsx
+++ /dev/null
@@ -1,7 +0,0 @@
-import React from 'react';
-
-const Album_Image = () => {
-  return <div>Album_Image</div>;
-};
-
-export default Album_Image;
diff --git a/src/components/ContactUs.jsx b/src/pages/ContactUs.jsx
similarity index 99%
rename from src/components/ContactUs.jsx
rename to src/pages/ContactUs.jsx
index 8a2f11e..eafc567 100644
--- a/src/components/ContactUs.jsx
+++ b/src/pages/ContactUs.jsx
@@ -114,14 +114,18 @@ const ContactUs = () => {
           About Us
         </h1>
         <p className='text-[0.9vw] max-[410px]:text-[2.5vw] max-[823px]:text-[2.2vw] font-medium'>
+
           Welcome to [Institute Name], an institution dedicated to fostering innovation, knowledge, and personal growth. Our mission is to shape tomorrow’s leaders by offering exceptional educational opportunities and encouraging intellectual exploration.
+
         </p>
 
         <h2 className='font-semibold text-[1.5vw] max-[410px]:text-[5vw] max-[823px]:text-[3vw] mt-[.8rem] mb-[.5rem]'>
           Location
         </h2>
         <p className='text-[0.9vw] max-[410px]:text-[2.5vw] max-[823px]:text-[2.2vw] font-medium'>
+
           Welcome to [Institute Name], an institution dedicated to fostering innovation, knowledge, and personal growth.
+
         </p>
 
         <h2 className='font-semibold text-[1.5vw] max-[410px]:text-[5vw] max-[823px]:text-[3vw] mt-[.8rem] mb-[.5rem]'>
diff --git a/src/pages/Home.jsx b/src/pages/Home.jsx
index d4e9e16..e81af74 100644
--- a/src/pages/Home.jsx
+++ b/src/pages/Home.jsx
@@ -1,11 +1,23 @@
 import Hero from '../components/homeComponents/Hero';
 import Empower from '../components/homeComponents/Empower';
 import Skills from '../components/homeComponents/Skills';
-import Album from '../components/Album';
-import Testimonials from '../components/Testimonials';
+import Album from '../components/homeComponents/Album';
+import Testimonials from '../components/homeComponents/Testimonials';
 import { Helmet } from 'react-helmet-async';
+import useHomeUi from '../hooks/useHomeUi';
+import { useSelector } from 'react-redux';
+import Loader from '../components/Loader';
 
 function Home() {
+  useHomeUi();
+  let data = useSelector(
+    state => state.home.landingPage,
+  );
+
+  {
+    !data ? <Loader /> : null;
+  }
+
   return (
     <>
       <Helmet>
diff --git a/vite.config.js b/vite.config.js
index 4484665..3cb5a05 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -7,9 +7,8 @@ export default defineConfig({
   plugins: [react()],
   server: {
     proxy: {
-      '/api':
-        backend_Url ||
-        'http://localhost:3000',
+      '/api': backend_Url,
+      // 'http://localhost:3000',
     },
   },
 });