diff --git a/app/src/routes/projects/ProjectsTab/Select/Carousel.tsx b/app/src/routes/projects/ProjectsTab/Select/Carousel.tsx
index e8b6cdc0..9d4daa4c 100644
--- a/app/src/routes/projects/ProjectsTab/Select/Carousel.tsx
+++ b/app/src/routes/projects/ProjectsTab/Select/Carousel.tsx
@@ -4,6 +4,8 @@ import debounce from 'lodash/debounce';
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { getPreviewImage } from '../../helpers';
 import { Project } from '/common/models/project';
+import EditAppButton from './EditAppButton';
+import { motion, Variants } from 'framer-motion';
 
 interface EmblaCarouselProps {
     slides: Project[];
@@ -12,6 +14,28 @@ interface EmblaCarouselProps {
 
 const EmblaCarousel: React.FC<EmblaCarouselProps> = ({ slides, onSlideChange }) => {
     const WHEEL_SENSITIVITY = 10;
+    const containerVariants: Variants = {
+        rest: { opacity: 0, transition: { ease: 'easeIn', duration: 0.2 } },
+        hover: {
+            opacity: 1,
+            transition: {
+                duration: 0.3,
+                ease: 'easeOut',
+            },
+        },
+    };
+    const buttonVariants: Variants = {
+        rest: { opacity: 0, y: -5, transition: { ease: 'easeIn', duration: 0.2 } },
+        hover: {
+            opacity: 1,
+            y: 0,
+            transition: {
+                duration: 0.3,
+                type: 'tween',
+                ease: 'easeOut',
+            },
+        },
+    };
     const [emblaRef, emblaApi] = useEmblaCarousel({
         axis: 'y',
         loop: false,
@@ -122,7 +146,7 @@ const EmblaCarousel: React.FC<EmblaCarouselProps> = ({ slides, onSlideChange })
                     {slides.map((slide) => (
                         <div
                             key={slide.id}
-                            className="embla__slide h-full relative flex items-center justify-center"
+                            className="embla__slide h-full relative flex items-center justify-center select-none"
                             style={{
                                 flex: '0 0 90%',
                                 minWidth: 0,
@@ -136,8 +160,20 @@ const EmblaCarousel: React.FC<EmblaCarouselProps> = ({ slides, onSlideChange })
                                     className="rounded-lg object-cover max-w-[60%] max-h-[80%] bg-foreground"
                                 />
                             ) : (
-                                <div className="w-[60%] h-[80%] rounded-lg bg-gradient-to-t from-gray-800/40 via-gray-500/40 to-gray-400/40 border-gray-500 border-[0.5px]"></div>
+                                <div className="w-[60%] h-[80%] rounded-lg bg-gradient-to-t from-gray-800/40 via-gray-500/40 to-gray-400/40 border-gray-500 border-[0.5px]" />
                             )}
+                            <motion.div
+                                initial="rest"
+                                whileHover="hover"
+                                animate="rest"
+                                variants={containerVariants}
+                                className="absolute flex items-center justify-center w-[60%] h-[80%] z-10 bg-black-30"
+                            >
+                                <EditAppButton
+                                    variants={buttonVariants}
+                                    project={slide}
+                                />
+                            </motion.div>
                         </div>
                     ))}
                 </div>
diff --git a/app/src/routes/projects/ProjectsTab/Select/EditAppButton.tsx b/app/src/routes/projects/ProjectsTab/Select/EditAppButton.tsx
new file mode 100644
index 00000000..0b50f65b
--- /dev/null
+++ b/app/src/routes/projects/ProjectsTab/Select/EditAppButton.tsx
@@ -0,0 +1,34 @@
+import { useProjectsManager } from '@/components/Context';
+import { Button } from '@/components/ui/button';
+import { sendAnalytics } from '@/lib/utils';
+import { Pencil2Icon } from '@radix-ui/react-icons';
+import { motion } from 'framer-motion';
+import { ComponentProps } from 'react';
+import { Project } from '/common/models/project';
+
+const ButtonMotion = motion(Button)
+
+interface EditAppButtonProps extends ComponentProps<typeof ButtonMotion> {
+    project: Project;
+}
+
+export default function EditAppButton({ project, ...props }: EditAppButtonProps) {
+    const projectsManager = useProjectsManager();
+
+    const selectProject = (project: Project) => {
+        projectsManager.project = project;
+        sendAnalytics('open project', { id: project.id, url: project.url });
+    };
+    return (
+        <ButtonMotion
+            size="default"
+            variant={'outline'}
+            className="gap-2 bg-background-active border-[0.5px] border-border-active w-full lg:w-auto"
+            onClick={() => selectProject(project)}
+            {...props}
+        >
+            <Pencil2Icon />
+            <p> Edit App </p>
+        </ButtonMotion>
+    );
+}
diff --git a/app/src/routes/projects/ProjectsTab/Select/Info.tsx b/app/src/routes/projects/ProjectsTab/Select/Info.tsx
index 40c2a984..c28fbbab 100644
--- a/app/src/routes/projects/ProjectsTab/Select/Info.tsx
+++ b/app/src/routes/projects/ProjectsTab/Select/Info.tsx
@@ -1,15 +1,11 @@
-import { useProjectsManager } from '@/components/Context';
-import { Button } from '@/components/ui/button';
-import { sendAnalytics } from '@/lib/utils';
-import { Pencil2Icon } from '@radix-ui/react-icons';
 import { AnimatePresence, motion } from 'framer-motion';
 import { observer } from 'mobx-react-lite';
+import EditAppButton from './EditAppButton';
 import ProjectSettingsButton from './ProjectSettingsButton';
 import { timeSince } from '/common/helpers';
 import { Project } from '/common/models/project';
 
 const ProjectInfo = observer(({ project, direction }: { project: Project; direction: number }) => {
-    const projectsManager = useProjectsManager();
 
     const variants = {
         enter: (direction: number) => ({
@@ -26,11 +22,6 @@ const ProjectInfo = observer(({ project, direction }: { project: Project; direct
         }),
     };
 
-    const selectProject = (project: Project) => {
-        projectsManager.project = project;
-        sendAnalytics('open project', { id: project.id, url: project.url });
-    };
-
     return (
         project && (
             <>
@@ -53,15 +44,7 @@ const ProjectInfo = observer(({ project, direction }: { project: Project; direct
                     <p>{project.url}</p>
                 </div>
                 <div className="flex flex-col sm:flex-row gap-3 sm:gap-5 w-full">
-                    <Button
-                        size="default"
-                        variant={'outline'}
-                        className="gap-2 bg-background-active border-[0.5px] border-border-active w-full lg:w-auto"
-                        onClick={() => selectProject(project)}
-                    >
-                        <Pencil2Icon />
-                        <p> Edit App </p>
-                    </Button>
+                    <EditAppButton project={project} />
                     <ProjectSettingsButton project={project} />
                 </div>
             </>