diff --git a/app/Components/Map.tsx b/app/Components/Map.tsx
index 9e280d5..954fdef 100644
--- a/app/Components/Map.tsx
+++ b/app/Components/Map.tsx
@@ -2,7 +2,8 @@ import React from "react"
 
 export default function Map(){
   return (
-    <div className='bg-white flex flex-col content-center justify-center p-10'>
+    // <div className='bg-white flex flex-col content-center justify-center p-10'>
+    <div className="justify-left flex flex-wrap items-center gap-7 p-6">
       <iframe 
         title="Mappedin Map" 
         name="Mappedin Map" 
diff --git a/app/Components/MapTitle.tsx b/app/Components/MapTitle.tsx
deleted file mode 100644
index f91a60a..0000000
--- a/app/Components/MapTitle.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import React from 'react';
-
-
-export default function MapTitle(){
-
-    return (
-        <div className='bg-mapBackground bg-cover flex flex-col content-center justify-center p-44'>
-            <h1 className='mt-10 text-center text-7xl tracking-widest font-extrabold text-white'>MAP</h1>
-            <h1 className='pt-3 mt-10 text-center text-lg font-semibold text-white'>NAVIGATING THE MARKET? FIND MERCHANTS EASILY WITH OUR INTERACTIVE MAP. </h1>
-        </div>
-    );
-};
diff --git a/app/map/page.tsx b/app/map/page.tsx
index 9846944..9eea412 100644
--- a/app/map/page.tsx
+++ b/app/map/page.tsx
@@ -1,19 +1,19 @@
 import React from 'react';
-import MapTitle from '../Components/MapTitle';
 import Map from '../Components/Map';
 
 export default function Home() {
   return (
-    <div>
-      {/* exporting components of the Vendor Info Page in sequential order */}
-      {/* <VendorHeader /> 
-      <VendorDescription height = {96} />
-      <VendorPictures height = {96} />
-      <Contact /> */}
-      {/* exporting components of the Map Page in sequential order */}
-      <MapTitle />
+    <>
+      <div className='absolute z-0 bg-mapBackground bg-cover w-full h-128 flex flex-col content-center justify-center p-5'>
+      </div>
+      <div className="relative z-20 flex h-128 flex-col justify-center p-5">
+        <h1 className='font-sans top-20 bg-none text-center text-4xl font-bold tracking-[.15em] text-white md:text-7xl'>MAP</h1>
+        <h3 className='pt-3 text-center text-lg md:text-xl font-medium tracking-[.15em] text-white'>NAVIGATING THE MARKET? FIND MERCHANTS EASILY WITH OUR INTERACTIVE MAP. </h3>
+      </div>
+      <div></div>
+
       <Map />
-    </div>
+    </>
   );
 };
 
diff --git a/app/sms/page.tsx b/app/sms/page.tsx
index 7bfa88d..58907d4 100644
--- a/app/sms/page.tsx
+++ b/app/sms/page.tsx
@@ -114,27 +114,14 @@ export function InfoForm() {
     };
 
     return (
-        <div className="flex items-center justify-center">
-            <div
-                style={{
-                    backgroundPosition: "center top",
-                    backgroundImage: 'url("/background.png")',
-                    backgroundSize: "cover",
-                    filter: "brightness(75%)",
-                    height: "65vh",
-                    position: "absolute",
-                    top: 0,
-                    left: 0,
-                    width: "100%",
-                    zIndex: "0",
-                }}
-            ></div>
+        <>
+            <div className='absolute z-0 bg-smsBackground bg-cover w-full h-128 flex flex-col content-center justify-center p-5'></div>
             <div className="relative mt-44 flex flex-col items-center justify-center text-center">
                 <h1 className="font-sans text-center text-4xl font-bold tracking-[.15em] text-white md:text-7xl">
                     CONNECT
                 </h1>
 
-                <h3 className="font-sans mx-3 mt-4 pt-3 text-center text-lg font-medium tracking-[.15em] text-white md:text-xl">
+                <h3 className="pt-3 text-center text-lg md:text-xl font-medium tracking-[.15em] text-white">
                     GET NOTIFIED ABOUT OUR RAFFLE, PROMOTIONS, AND SPECIAL
                     EVENTS HAPPENING AT THE MARKET!
                 </h3>
@@ -202,7 +189,7 @@ export function InfoForm() {
                 pauseOnHover
                 theme="light"
             />
-        </div>
+        </>
     );
 }
 
diff --git a/tailwind.config.js b/tailwind.config.js
index 8bd0075..e94360d 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -19,6 +19,7 @@ module.exports = {
                 nutcrackerBackground: "url('../public/background.png')",
                 vendorBackground: "url('../public/vendorBackground.png')",
                 mapBackground: "url('/assets/MapCover.png')",
+                smsBackground: "url('/background.png')"
             },
             colors: {
                 ballet: "#33323c",