diff --git a/coffee_and_coding/app/components/GoogleMap.jsx b/coffee_and_coding/app/components/GoogleMap.jsx
index e69bfd3c..09188e4b 100644
--- a/coffee_and_coding/app/components/GoogleMap.jsx
+++ b/coffee_and_coding/app/components/GoogleMap.jsx
@@ -1,26 +1,18 @@
 import React from "react";
 import PropTypes from "prop-types";
-import { GoogleMap, Marker, LoadScript } from "@react-google-maps/api";
 
-const MapContainer = ({ searchValue }) => {
+export const GoogleMap = ({ searchValue }) => {
     const defaultCenter = { lat: 40.7128, lng: -74.006 }; // Default center coordinates
 
     return (
-        <LoadScript googleMapsApiKey={process.env.NEXT_PUBLIC_API_Key}>
-            <GoogleMap
-                mapContainerStyle={{ width: "100%", height: "500px" }}
-                center={defaultCenter}
-                zoom={10}
-            >
-                {/* Marker component */}
-                <Marker position={defaultCenter} title="Your Marker Title" />
-            </GoogleMap>
-        </LoadScript>
+        <iframe
+            src="https://www.google.com/maps/d/u/0/embed?mid=1Uh86O1UhVd_o2CAd5cm_FTQQlTTbrFM&ehbc=2E312F"
+            width="640"
+            height="480"
+        ></iframe>
     );
 };
 
-MapContainer.propTypes = {
-    searchValue: PropTypes.string.isRequired,
-};
-
-export default MapContainer;
+// MapContainer.propTypes = {
+//     searchValue: PropTypes.string.isRequired,
+// };
diff --git a/coffee_and_coding/app/components/MapContainer.jsx b/coffee_and_coding/app/components/MapContainer.jsx
index 6bad7cb7..ea64a7c5 100644
--- a/coffee_and_coding/app/components/MapContainer.jsx
+++ b/coffee_and_coding/app/components/MapContainer.jsx
@@ -1,57 +1,64 @@
 "use client";
-import React, { useState } from 'react';
-import PropTypes from 'prop-types';
-import { GoogleMap, useLoadScript, Marker } from '@react-google-maps/api';
-import Grid from '@mui/material/Grid';
-import { Box } from '@mui/material';
-const libraries = ['places'];
+import React, { useState } from "react";
+import PropTypes from "prop-types";
+import { GoogleMap, useLoadScript, Marker } from "@react-google-maps/api";
+import Grid from "@mui/material/Grid";
+import { Box } from "@mui/material";
+const libraries = ["places"];
 const mapContainerStyle = {
-  height: '75vh',
+    height: "100vh",
 };
-const coffeeMarkers = [
-  { lat: 37.7749, lng: -122.4194 }, // San Francisco, CA
-  { lat: 40.7128, lng: -74.0060 }, // New York City, NY
-  { lat: 34.0522, lng: -118.2437 }, // Los Angeles, CA
-];
 
-export const MapContainer = ({ searchValue }) => {
+export const MapContainer = ({
+    searchValue,
+    coffeeMarkers,
+    handlePlaceClicked,
+}) => {
+    const [selectedMarker, setSelectedMarker] = useState("");
+    const handleMarkerClick = (event, place) => {
+        console.log(place);
+        handlePlaceClicked(place);
+    };
+    const { isLoaded, loadError } = useLoadScript({
+        googleMapsApiKey: process.env.NEXT_PUBLIC_API_Key,
+        libraries,
+    });
 
-  const [selectedMarker, setSelectedMarker] = useState("");
-  const handleMarkerClick = () => {
-    console.log("CLICKED");
-  }
-  const { isLoaded, loadError } = useLoadScript({
-    googleMapsApiKey: process.env.NEXT_PUBLIC_API_Key,
-    libraries,
-  });
+    if (loadError) {
+        return <div>Error loading maps</div>;
+    }
 
-  if (loadError) {
-    return <div>Error loading maps</div>;
-  }
+    if (!isLoaded) {
+        return <div>Loading maps</div>;
+    }
 
-  if (!isLoaded) {
-    return <div>Loading maps</div>;
-  }
-
-  return (
-    <div>
-      <Box component="section" 
-      sx={{
-        flexGrow: 1,
-      }}>
-        <GoogleMap mapContainerStyle={mapContainerStyle} zoom={10} center={coffeeMarkers[0]}>
-          {coffeeMarkers.map((place, index) => (
-            <Marker key={index} position={{ lat: place.lat, lng: place.lng }}
-            onClick={(event) => handleMarkerClick(event, place)}
-            />
-          ))}
-            <Marker position={searchValue}></Marker>
-        </GoogleMap>
-      </Box>
-    </div>
-  );
-}
+    return (
+        <div>
+            <Box
+                component="section"
+                sx={{
+                    flexGrow: 1,
+                }}
+            >
+                <GoogleMap
+                    mapContainerStyle={mapContainerStyle}
+                    zoom={10}
+                    center={coffeeMarkers[0]}
+                >
+                    {coffeeMarkers.map((place, index) => (
+                        <Marker
+                            key={index}
+                            position={{ lat: place.lat, lng: place.lng }}
+                            onClick={(event) => handleMarkerClick(event, place)}
+                        />
+                    ))}
+                    <Marker position={searchValue}></Marker>
+                </GoogleMap>
+            </Box>
+        </div>
+    );
+};
 
 // MapContainer.propTypes = {
 //   searchValue: PropTypes.string.isRequired,
-// };
\ No newline at end of file
+// };
diff --git a/coffee_and_coding/app/components/PopUp.jsx b/coffee_and_coding/app/components/PopUp.jsx
index 538d4df9..1edf6298 100644
--- a/coffee_and_coding/app/components/PopUp.jsx
+++ b/coffee_and_coding/app/components/PopUp.jsx
@@ -1,18 +1,26 @@
 "use client";
-import React, { useState } from 'react';
-import Box from '@mui/material/Box';
-import Switch from '@mui/material/Switch';
-import Paper from '@mui/material/Paper';
-import Slide from '@mui/material/Slide';
-import FormControlLabel from '@mui/material/FormControlLabel';
-import {sizing} from '@mui/system';
+import React, { useState } from "react";
+import Paper from "@mui/material/Paper";
+import { Typography } from "@mui/material";
+import { styled } from "@mui/material/styles";
 
-export const PopUp = ({place}) => {
-    return (
-        <div>
-            <Paper sx={{ m: 1,height: 420 }} elevation={4}>
+const PaperStyling = styled(Paper)(({ theme }) => ({
+    width: "100%",
+    padding: theme.spacing(4),
+    ...theme.typography.body2,
+    textAlign: "center",
+}));
 
-            </Paper>
-        </div>
-    )
-}
\ No newline at end of file
+export const PopUp = ({ place }) => {
+    return (
+        <Paper sx={{ height: "100%", position: "relative" }} elevation={4}>
+            <PaperStyling>
+                <Typography variant="h3" gutterBottom>
+                    CAFE COMMA
+                </Typography>
+                <Typography variant="subtitle1">Ratings...</Typography>
+                <Typography variant="subtitle1">{place.lat}</Typography>
+            </PaperStyling>
+        </Paper>
+    );
+};
diff --git a/coffee_and_coding/app/page.jsx b/coffee_and_coding/app/page.jsx
index 547cd3f4..784a457a 100644
--- a/coffee_and_coding/app/page.jsx
+++ b/coffee_and_coding/app/page.jsx
@@ -1,75 +1,99 @@
 "use client";
-import React, { useState } from 'react';
-import Image from 'next/image';
-import Grid from '@mui/material/Grid';
-import Box from '@mui/material/Box';
-import { Search } from './components/Search.jsx';
-import { MapContainer } from './components/MapContainer.jsx';
-import { PopUp } from './components/PopUp.jsx';
+import React, { useState } from "react";
+import Image from "next/image";
+import Grid from "@mui/material/Grid";
+import Box from "@mui/material/Box";
+import { Search } from "./components/Search.jsx";
+import { GoogleMap } from "./components/GoogleMap.jsx";
+import { PopUp } from "./components/PopUp.jsx";
+import FormControlLabel from "@mui/material/FormControlLabel";
+import Switch from "@mui/material/Switch";
+import Fade from "@mui/material/Fade";
+import { MapContainer } from "./components/MapContainer.jsx";
+
+const coffeeMarkers = [
+    { lat: 37.7749, lng: -122.4194 }, // San Francisco, CA
+    { lat: 40.7128, lng: -74.006 }, // New York City, NY
+    { lat: 34.0522, lng: -118.2437 }, // Los Angeles, CA
+];
 
 export default function Home() {
-	const [searchValue, setSearchValue] = useState("Atlanta, GA");
-	const [placeClicked, placeClickedValue] = useState("Atlanta, GA");
+    const [searchValue, setSearchValue] = useState("Atlanta, GA");
+    const [placeClicked, setPlaceClicked] = useState("Atlanta, GA");
+
+    const handlePlaceClicked = (place) => {
+        setPlaceClicked(place);
+    };
+
+    const handleEnterPress = (inputValue) => {
+        // console.log(inputValue);
+        setSearchValue(inputValue);
+    };
+    const [checked, setChecked] = useState(false);
 
-	const handleEnterPress = (inputValue) => {
-		console.log(inputValue);
-		setSearchValue(inputValue);
-	};
+    const handleChange = () => {
+        setChecked((prev) => !prev);
+    };
 
-  // const handlePlaceClicker = ()
-  
-  return (
-    <main className="flex min-h-screen flex-col items-center justify-between p-24">
-      <div className="z-10 max-w-5xl w-full items-center justify-between font-mono text-sm lg:flex">
-        <p className="fixed left-0 top-0 flex w-full justify-center border-b border-gray-300 bg-gradient-to-b from-zinc-200 pb-6 pt-8 backdrop-blur-2xl dark:border-neutral-800 dark:bg-zinc-800/30 dark:from-inherit lg:static lg:w-auto  lg:rounded-xl lg:border lg:bg-gray-200 lg:p-4 lg:dark:bg-zinc-800/30">
-          Coffee and Coding
-          <code className="font-mono font-bold"></code>
-        </p>
-        <div className="fixed bottom-0 left-0 flex h-48 w-full items-end justify-center bg-gradient-to-t from-white via-white dark:from-black dark:via-black lg:static lg:h-auto lg:w-auto lg:bg-none">
-          <a
-            className="pointer-events-none flex place-items-center gap-2 p-8 lg:pointer-events-auto lg:p-0"
-            href="https://vercel.com?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            By{" "}
-            {/* <Image
-              src="/vercel.svg"
-              alt="Vercel Logo"
-              className="dark:invert"
-              width={100}
-              height={24}
-              priority
-            /> */}
-          </a>
-        </div>
-      </div>
+    return (
+        <main>
+            <div className="z-10 max-w-5xl w-full items-center justify-between font-mono text-sm lg:flex">
+                <p className="fixed left-0 top-0 flex w-full justify-center border-b border-gray-300 bg-gradient-to-b from-zinc-200 pb-6 pt-8 backdrop-blur-2xl dark:border-neutral-800 dark:bg-zinc-800/30 dark:from-inherit lg:static lg:w-auto  lg:rounded-xl lg:border lg:bg-gray-200 lg:p-4 lg:dark:bg-zinc-800/30">
+                    Coffee and Coding
+                    <code className="font-mono font-bold"></code>
+                </p>
+            </div>
 
-      <div className="relative flex place-items-center before:absolute before:h-[300px] before:w-full sm:before:w-[480px] before:-translate-x-1/2 before:rounded-full before:bg-gradient-radial before:from-white before:to-transparent before:blur-2xl before:content-[''] after:absolute after:-z-20 after:h-[180px] after:w-full sm:after:w-[240px] after:translate-x-1/3 after:bg-gradient-conic after:from-sky-200 after:via-blue-200 after:blur-2xl after:content-[''] before:dark:bg-gradient-to-br before:dark:from-transparent before:dark:to-blue-700 before:dark:opacity-10 after:dark:from-sky-900 after:dark:via-[#0141ff] after:dark:opacity-40 before:lg:h-[360px] z-[-1]">
-        {/* <Image
-          className="relative dark:drop-shadow-[0_0_0.3rem_#ffffff70] dark:invert"
-          src="/next.svg"
-          alt="Next.js Logo"
-          width={180}
-          height={37}
-          priority
-        /> */}
-      </div>
-        <Grid container spacing={2} p={0}>
-          <Grid item xs={4}>
-            <Grid container spacing={1}>
-              <Grid item xs={12}>
-		  	        <Search onEnterPress={handleEnterPress} />
-              </Grid>
-              <Grid item xs={12}>
-		  	        <PopUp place={placeClicked} />
-              </Grid>
-            </Grid>
-          </Grid>
-          <Grid item xs={8}>
-		  	    <MapContainer searchValue={searchValue} />
-          </Grid>
-        </Grid>
-    </main>
-  );
+            <Box
+                sx={{
+                    flexGrow: 1,
+                    padding: 5,
+                    border: "1px solid red",
+                }}
+            >
+                <Grid container spacing={2}>
+                    <Grid item xs={4}>
+                        <Grid container spacing={1}>
+                            <Grid item xs={12}>
+                                <Search onEnterPress={handleEnterPress} />
+                            </Grid>
+                            <Grid item xs={12} style={{ height: "100%" }}>
+                                <FormControlLabel
+                                    control={
+                                        <Switch
+                                            checked={checked}
+                                            onChange={handleChange}
+                                        />
+                                    }
+                                    label="Show from target"
+                                />
+                            </Grid>
+                        </Grid>
+                    </Grid>
+                    <Grid item xs={8}>
+                        <Box position="relative">
+                            <MapContainer
+                                searchValue={searchValue}
+                                coffeeMarkers={coffeeMarkers}
+                                handlePlaceClicked={handlePlaceClicked}
+                            />
+                            <Fade in={checked}>
+                                <div
+                                    style={{
+                                        position: "absolute",
+                                        top: 0,
+                                        left: 0,
+                                        height: "100%",
+                                        zIndex: 2,
+                                    }}
+                                >
+                                    <PopUp place={placeClicked} />
+                                </div>
+                            </Fade>
+                        </Box>
+                    </Grid>
+                </Grid>
+            </Box>
+        </main>
+    );
 }