diff --git a/docker-compose.yml b/docker-compose.yml
index 70e7923..0cb4d0c 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -37,6 +37,8 @@ services:
       - app_network
     environment:
       - VITE_API_URL=/api
+    env_file:
+      - .env
     depends_on:
       - web_server
 
diff --git a/frontend/src/pages/VideoPage.tsx b/frontend/src/pages/VideoPage.tsx
index 96a4fff..8388d04 100644
--- a/frontend/src/pages/VideoPage.tsx
+++ b/frontend/src/pages/VideoPage.tsx
@@ -9,6 +9,7 @@ import { useFollow } from "../hooks/useFollow";
 import VideoPlayer from "../components/Video/VideoPlayer";
 import { SocketProvider } from "../context/SocketContext";
 import AuthModal from "../components/Auth/AuthModal";
+import CheckoutForm, {Return} from "../components/Checkout/CheckoutForm";
 
 interface VideoPageProps {
   streamerId: number;
@@ -30,22 +31,22 @@ const VideoPage: React.FC<VideoPageProps> = ({ streamerId }) => {
   const { isFollowing, checkFollowStatus, followUser, unfollowUser } =
     useFollow();
   const { showAuthModal, setShowAuthModal } = useAuthModal();
-  // const [showCheckout, setShowCheckout] = useState(false);
-  // const showReturn = window.location.search.includes("session_id");
+  const [showCheckout, setShowCheckout] = useState(false);
+  const showReturn = window.location.search.includes("session_id");
   const navigate = useNavigate();
 
-  // useEffect(() => {
-  //   // Prevent scrolling when checkout is open
-  //   if (showCheckout) {
-  //     document.body.style.overflow = "hidden";
-  //   } else {
-  //     document.body.style.overflow = "unset";
-  //   }
-  //   // Cleanup function to ensure overflow is restored when component unmounts
-  //   return () => {
-  //     document.body.style.overflow = "unset";
-  //   };
-  // }, [showCheckout]);
+  useEffect(() => {
+    // Prevent scrolling when checkout is open
+    if (showCheckout) {
+      document.body.style.overflow = "hidden";
+    } else {
+      document.body.style.overflow = "unset";
+    }
+    // Cleanup function to ensure overflow is restored when component unmounts
+    return () => {
+      document.body.style.overflow = "unset";
+    };
+  }, [showCheckout]);
 
   useEffect(() => {
     // Fetch stream data for this streamer
@@ -202,6 +203,8 @@ const VideoPage: React.FC<VideoPageProps> = ({ streamerId }) => {
                 onClick={() => {
                   if (!isLoggedIn) {
                     setShowAuthModal(true);
+                  } else {
+                    setShowCheckout(true);
                   }
                 }}
               >
@@ -210,8 +213,8 @@ const VideoPage: React.FC<VideoPageProps> = ({ streamerId }) => {
             </div>
 
           </div>
-          {/* {showCheckout && <CheckoutForm onClose={() => setShowCheckout(false)} />} */}
-          {/* {showReturn && <Return />} */}
+          {showCheckout && <CheckoutForm onClose={() => setShowCheckout(false)} />}
+          {showReturn && <Return />}
           {showAuthModal && <AuthModal onClose={() => setShowAuthModal(false)} />}
         </div>
       </div>
diff --git a/web_server/blueprints/stripe.py b/web_server/blueprints/stripe.py
index d55c8b1..4ea3ef7 100644
--- a/web_server/blueprints/stripe.py
+++ b/web_server/blueprints/stripe.py
@@ -21,7 +21,7 @@ def create_checkout_session():
                     'quantity': 1,
                 },
             ],
-            mode='payment',
+            mode='subscription',
             redirect_on_completion = 'never'
         )
     except Exception as e: