diff --git a/src/app/home/page.tsx b/src/app/home/page.tsx
index 1a3d160..a378a86 100644
--- a/src/app/home/page.tsx
+++ b/src/app/home/page.tsx
@@ -1,8 +1,9 @@
 "use client";
 
-import React from 'react';
+import { useState } from 'react';
 import { Box, Button, Typography } from '@mui/material';
 import { Poppins } from "next/font/google";
+import Popup from '@/components/ui/popup';
 
 const poppins = Poppins({
   subsets: ["latin"],
@@ -10,110 +11,123 @@ const poppins = Poppins({
 });
 
 const Home = () => {
-  return (
-    <Box
-      sx={{
-        position: 'relative',
-        minHeight: '100vh',
-        display: 'flex',
-        flexDirection: 'column',
-        alignItems: 'center',
-        justifyContent: 'center',
-        padding: 0,
-        overflow: 'hidden',
-      }}
-    >
-      {/* Background Video */}
-      <Box
-        component="video"
-        autoPlay
-        loop
-        muted
-        sx={{
-          position: 'absolute',
-          top: 0,
-          left: 0,
-          width: '100%',
-          height: '100%',
-          objectFit: 'cover',
-          zIndex: -1,
-          opacity: 0.5,  // Adjust opacity for background video
-        }}
-      >
-        <source src="/4.mp4" type="video/mp4" />
-        Your browser does not support the video tag.
-      </Box>
+  const [isPopupOpen, setIsPopupOpen] = useState(true);
 
-      {/* Content */}
-      <Typography
-        variant="h2"
-        component="h1"
-        className={poppins.className}
-        sx={{
-          fontSize: '5rem',
-          fontWeight: 'bold',
-          color: '#ffff',
-          textAlign: 'center',
-          marginBottom: '3rem',
-          whiteSpace: 'nowrap',
-          overflow: 'hidden',
-          borderRight: '.15em solid #001ea5',
-          animation: 'typing 3.5s steps(30, end), blink-caret .75s step-end infinite',
-          '& span': {
-            background: '#001ea5',
-            WebkitBackgroundClip: 'text',
-            WebkitTextFillColor: 'transparent',
-            display: 'inline',
-          },
-        }}
-      >
-        Welcome to A.T.O.M Robotics
-      </Typography>
+  const closePopup = () => setIsPopupOpen(false);
+
+  return (
+    <>
+      <Popup isOpen={isPopupOpen} onClose={closePopup}>
+        {/* Yaha apna content dal lo */}
+        <h2 id="popup-title" className="text-xl text-gray-700 font-bold mb-4">Orientation Notice</h2>
+        <h2 className="text-xl text-gray-700 font-semibold mb-2">Custom Content</h2>
+        <p className="text-gray-700 mb-4">The orientation is scheduled for September 7th.</p>
+        <img src="https://via.placeholder.com/150" alt="Placeholder" className="mx-auto" />
+      </Popup>
 
       <Box
         sx={{
+          position: 'relative',
+          minHeight: '100vh',
           display: 'flex',
-          flexDirection: 'row',
-          gap: '2rem',
-          marginTop: '2rem',
-          flexWrap: 'wrap',
+          flexDirection: 'column',
+          alignItems: 'center',
           justifyContent: 'center',
+          padding: 0,
+          overflow: 'hidden',
         }}
       >
-        <Button
+        {/* Background Video */}
+        <Box
+          component="video"
+          autoPlay
+          loop
+          muted
           sx={{
-            background: '#0d47a1',
-            color: 'white',
-            borderRadius: '20px',
-            fontWeight: 'bold',
-            padding: '0.5rem 1rem',
-            '&:hover': {
-              background: '#0a3b6c',
-            },
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            width: '100%',
+            height: '100%',
+            objectFit: 'cover',
+            zIndex: -1,
+            opacity: 0.5,  // Adjust opacity for background video
           }}
         >
-          Contact Us
-        </Button>
-        <Button
+          <source src="/4.mp4" type="video/mp4" />
+          Your browser does not support the video tag.
+        </Box>
+
+        {/* Content */}
+        <Typography
+          variant="h2"
+          component="h1"
+          className={poppins.className}
           sx={{
-            background: '#0d47a1',
-            color: 'white',
-            borderRadius: '20px',
+            fontSize: { xs: '1.5rem', sm: '2rem', md: '3rem', lg: '4rem', xl: '5rem' },  // Adjusted responsive font size
             fontWeight: 'bold',
-            padding: '0.5rem 1rem',
-            '&:hover': {
-              background: '#0a3b6c',
+            color: '#ffff',
+            textAlign: 'center',
+            marginBottom: { xs: '1.5rem', sm: '2rem', md: '3rem' },
+            whiteSpace: 'nowrap',
+            overflow: 'hidden',
+            borderRight: '.15em solid #001ea5',
+            animation: 'typing 3.5s steps(30, end), blink-caret .75s step-end infinite',
+            '& span': {
+              background: '#001ea5',
+              WebkitBackgroundClip: 'text',
+              WebkitTextFillColor: 'transparent',
+              display: 'inline',
             },
           }}
         >
-          Selection Task
-        </Button>
-      </Box>
+          Welcome to A.T.O.M Robotics
+        </Typography>
 
-      <style jsx>{`
+        <Box
+          sx={{
+            display: 'flex',
+            flexDirection: 'row',
+            gap: { xs: '1rem', sm: '1.5rem', md: '2rem' },
+            marginTop: '2rem',
+            flexWrap: 'wrap',
+            justifyContent: 'center',
+          }}
+        >
+          <Button
+            sx={{
+              background: '#0d47a1',
+              color: 'white',
+              borderRadius: '20px',
+              fontWeight: 'bold',
+              padding: { xs: '0.5rem 1rem', sm: '0.5rem 1.25rem', md: '0.5rem 1.5rem' },
+              '&:hover': {
+                background: '#0a3b6c',
+              },
+            }}
+          >
+            Contact Us
+          </Button>
+          <Button
+            sx={{
+              background: '#0d47a1',
+              color: 'white',
+              borderRadius: '20px',
+              fontWeight: 'bold',
+              padding: { xs: '0.5rem 1rem', sm: '0.5rem 1.25rem', md: '0.5rem 1.5rem' },
+              '&:hover': {
+                background: '#0a3b6c',
+              },
+            }}
+          >
+            Selection Task
+          </Button>
+        </Box>
+
+        <style jsx>{`
         @keyframes typing {
           from { width: 0 }
-          to { width: 100% }
+          to { width: 90% }
         }
 
         @keyframes blink-caret {
@@ -121,8 +135,9 @@ const Home = () => {
           50% { border-color: #001ea5; }
         }
       `}</style>
-    </Box>
+      </Box>
+    </>
   );
 };
 
-export default Home;
+export default Home;
\ No newline at end of file
diff --git a/src/components/ui/popup.tsx b/src/components/ui/popup.tsx
new file mode 100644
index 0000000..34f6b62
--- /dev/null
+++ b/src/components/ui/popup.tsx
@@ -0,0 +1,54 @@
+import React from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+
+// Adjust the props to include children
+const Popup: React.FC<{ isOpen: boolean; onClose: () => void; children?: React.ReactNode }> = ({ isOpen, onClose, children }) => {
+    return (
+        <AnimatePresence>
+            {isOpen && (
+                <>
+                    <motion.div
+                        className="fixed inset-0 bg-black bg-opacity-50 backdrop-blur-sm z-40"
+                        initial={{ opacity: 0 }}
+                        animate={{ opacity: 1 }}
+                        exit={{ opacity: 0 }}
+                        onClick={onClose}
+                    />
+
+                    <motion.div
+                        className="fixed inset-0 flex items-center justify-center z-50"
+                        initial={{ scale: 0.8 }}
+                        animate={{ scale: 1 }}
+                        exit={{ scale: 0.8 }}
+                        role="dialog"
+                        aria-labelledby="popup-title"
+                    >
+                        <div className="bg-white p-6 rounded-lg shadow-lg w-80 relative">
+                            <button
+                                className="absolute top-3 right-3 text-xl text-gray-700 hover:text-red-900"
+                                onClick={onClose}
+                                aria-label="Close"
+                            >
+                                &times;
+                            </button>
+
+                            {/* Render the children here */}
+                            <div className="text-center">
+                                {/* <h2 id="popup-title" className="text-xl text-gray-700 font-semibold mb-4">Popup Title</h2> */}
+                                {children}
+                                <button
+                                    className="mt-6 bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
+                                    onClick={onClose}
+                                >
+                                    OK!
+                                </button>
+                            </div>
+                        </div>
+                    </motion.div>
+                </>
+            )}
+        </AnimatePresence>
+    );
+};
+
+export default Popup;
\ No newline at end of file