diff --git a/src/interface/pages/Store.tsx b/src/interface/pages/Store.tsx
index 685bd319..eca384c0 100644
--- a/src/interface/pages/Store.tsx
+++ b/src/interface/pages/Store.tsx
@@ -167,7 +167,7 @@ const Store = () => {
               }}
             >
               { coverThemes.map((theme, index) => (
-                  <SwiperSlide className='relative rounded-xl overflow-clip' onClick={() => setDisplayTheme(theme)} key={index}>
+                  <SwiperSlide className='relative cursor-pointer rounded-xl overflow-clip' onClick={() => setDisplayTheme(theme)} key={index}>
                     <img
                       src={theme.marqueeImage}
                       alt="Theme Preview"
@@ -185,83 +185,85 @@ const Store = () => {
             </Swiper>
           </motion.div>
 
-          <AnimatePresence>
-            {displayTheme && (
-              <motion.div
-                className="fixed inset-0 z-50 flex items-end justify-center bg-black bg-opacity-70"
-                initial={{ opacity: 0, pointerEvents: 'none' }}
-                animate={{ opacity: 1, pointerEvents: 'auto' }}
-                exit={{ opacity: 0, pointerEvents: 'none' }}
-                onClick={() => setDisplayTheme(null)}
-              >
+          <div className={displayTheme ? 'pointer-events-auto' : 'pointer-events-none'}>
+            <AnimatePresence>
+              {displayTheme && (
                 <motion.div
-                  onClick={(e) => e.stopPropagation()}
-                  className="w-full max-w-xl h-[95%] p-8 pt-5 bg-white rounded-t-2xl dark:bg-zinc-800 overflow-scroll"
-                  exit={{ y: "100vh" }}
-                  transition={{ type: 'spring', stiffness: 300, damping: 30 }}
-                  variants={containerVariants}
-                  initial="hidden"
-                  animate="visible"
+                  className={`fixed inset-0 z-50 flex items-end justify-center bg-black bg-opacity-70`}
+                  initial={{ opacity: 0 }}
+                  animate={{ opacity: 1 }}
+                  exit={{ opacity: 0 }}
+                  onClick={() => setDisplayTheme(null)}
                 >
-                  <motion.div className="relative h-auto">
-                    <motion.button
-                      className="absolute top-0 right-0 p-2 text-xl font-bold text-gray-600 font-IconFamily dark:text-gray-200"
-                      onClick={() => setDisplayTheme(null)}
-                      variants={textVariants}
-                    >
-                      {'\ued8a'}
-                    </motion.button>
-                    <motion.h2 className="mb-4 text-2xl font-bold" variants={textVariants}>
-                      {displayTheme.name}
-                    </motion.h2>
-                    <motion.img src={displayTheme.coverImage} alt="Theme Cover" className="object-cover w-full h-48 mb-4 rounded-md" variants={textVariants} />
-                    <motion.p className="mb-4 text-gray-700 dark:text-gray-300" variants={textVariants}>
-                      {displayTheme.description}
-                    </motion.p>
-                    <motion.button
-                      onClick={() => downloadTheme(displayTheme.id)}
-                      className="flex px-4 py-2 mt-4 ml-auto rounded-full dark:text-white bg-zinc-300 dark:bg-zinc-700 dark:hover:bg-zinc-600/50 hover:bg-zinc-200 focus:outline-none focus:ring-2 focus:ring-zinc-800 focus:ring-offset-2"
-                      variants={textVariants}
-                    >
-                      { installingThemes.includes(displayTheme.id) ? 
-                        <>
-                        <SpinnerIcon className="w-4 h-4 mr-2" />
-                        Installing...
-                        </> :
-                        <> Install </>
-                      }
-                    </motion.button>
+                  <motion.div
+                    onClick={(e) => e.stopPropagation()}
+                    className="w-full max-w-xl h-[95%] p-8 pt-5 bg-white rounded-t-2xl dark:bg-zinc-800 overflow-scroll"
+                    exit={{ y: "100vh" }}
+                    transition={{ type: 'spring', stiffness: 300, damping: 30 }}
+                    variants={containerVariants}
+                    initial="hidden"
+                    animate="visible"
+                  >
+                    <motion.div className="relative h-auto">
+                      <motion.button
+                        className="absolute top-0 right-0 p-2 text-xl font-bold text-gray-600 font-IconFamily dark:text-gray-200"
+                        onClick={() => setDisplayTheme(null)}
+                        variants={textVariants}
+                      >
+                        {'\ued8a'}
+                      </motion.button>
+                      <motion.h2 className="mb-4 text-2xl font-bold" variants={textVariants}>
+                        {displayTheme.name}
+                      </motion.h2>
+                      <motion.img src={displayTheme.coverImage} alt="Theme Cover" className="object-cover w-full h-48 mb-4 rounded-md" variants={textVariants} />
+                      <motion.p className="mb-4 text-gray-700 dark:text-gray-300" variants={textVariants}>
+                        {displayTheme.description}
+                      </motion.p>
+                      <motion.button
+                        onClick={() => downloadTheme(displayTheme.id)}
+                        className="flex px-4 py-2 mt-4 ml-auto rounded-full dark:text-white bg-zinc-300 dark:bg-zinc-700 dark:hover:bg-zinc-600/50 hover:bg-zinc-200 focus:outline-none focus:ring-2 focus:ring-zinc-800 focus:ring-offset-2"
+                        variants={textVariants}
+                      >
+                        { installingThemes.includes(displayTheme.id) ? 
+                          <>
+                          <SpinnerIcon className="w-4 h-4 mr-2" />
+                          Installing...
+                          </> :
+                          <> Install </>
+                        }
+                      </motion.button>
 
-                    <motion.div className="my-8 border-b border-zinc-200 dark:border-zinc-700" variants={textVariants} />
+                      <motion.div className="my-8 border-b border-zinc-200 dark:border-zinc-700" variants={textVariants} />
 
-                    <motion.h3 className="mb-4 text-lg font-bold" variants={textVariants}>
-                      More Themes
-                    </motion.h3>
-                    <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
-                      {gridThemes.filter(theme => theme.id !== displayTheme.id).map((theme, index) => (
-                        <motion.div key={index} onClick={() => { setDisplayTheme(null); setDisplayTheme(theme); }} className='w-full cursor-pointer' variants={textVariants}>
-                          <div
-                            className="w-full overflow-clip rounded-xl transition-all duration-300 relative group/card flex flex-col hover:shadow-xl dark:hover:shadow-white/[0.1] hover:shadow-white/[0.8] h-auto"
-                          >
-                            <div className='absolute bottom-0 left-0 z-10 p-2'>
-                              <h6 className="text-xl font-bold text-neutral-600 dark:text-white">
-                                {theme.name}
-                              </h6>
-                              <p className="max-w-sm text-sm text-neutral-500 dark:text-neutral-200">
-                                {theme.description}
-                              </p>
+                      <motion.h3 className="mb-4 text-lg font-bold" variants={textVariants}>
+                        More Themes
+                      </motion.h3>
+                      <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
+                        {gridThemes.filter(theme => theme.id !== displayTheme.id).map((theme, index) => (
+                          <motion.div key={index} onClick={() => { setDisplayTheme(null); setDisplayTheme(theme); }} className='w-full cursor-pointer' variants={textVariants}>
+                            <div
+                              className="w-full overflow-clip rounded-xl transition-all duration-300 relative group/card flex flex-col hover:shadow-xl dark:hover:shadow-white/[0.1] hover:shadow-white/[0.8] h-auto"
+                            >
+                              <div className='absolute bottom-0 left-0 z-10 p-2'>
+                                <h6 className="text-xl font-bold text-neutral-600 dark:text-white">
+                                  {theme.name}
+                                </h6>
+                                <p className="max-w-sm text-sm text-neutral-500 dark:text-neutral-200">
+                                  {theme.description}
+                                </p>
+                              </div>
+                              <div className='absolute bottom-0 z-0 w-full h-3/4 bg-gradient-to-t from-black/80 to-transparent' />
+                              <img src={theme.coverImage} alt="Theme Preview" className="object-cover w-full h-48" />
                             </div>
-                            <div className='absolute bottom-0 z-0 w-full h-3/4 bg-gradient-to-t from-black/80 to-transparent' />
-                            <img src={theme.coverImage} alt="Theme Preview" className="object-cover w-full h-48" />
-                          </div>
-                        </motion.div>
-                      ))}
-                    </div>
+                          </motion.div>
+                        ))}
+                      </div>
+                    </motion.div>
                   </motion.div>
                 </motion.div>
-              </motion.div>
-            )}
-          </AnimatePresence>
+              )}
+            </AnimatePresence>
+          </div>
 
           {/* pagination */}
           <div className='absolute z-10 flex gap-2 bottom-2 right-2'>
@@ -283,7 +285,7 @@ const Store = () => {
 
         <div className="grid grid-cols-1 gap-4 py-12 mx-auto sm:grid-cols-2 lg:grid-cols-3">
           {filteredThemes.map((theme, index) => (
-            <div key={index} className='w-full cursor-pointer'>
+            <div onClick={() => setDisplayTheme(theme)} key={index} className='w-full cursor-pointer'>
               <div className="bg-gray-50 w-full transition-all duration-300 relative group/card flex flex-col hover:shadow-2xl dark:hover:shadow-white/[0.1] hover:shadow-white/[0.8] dark:bg-zinc-800 dark:border-white/[0.1] h-auto rounded-xl p-6 border">
                 <div>