diff --git a/src/App.js b/src/App.js
index c545d83..22c32c7 100644
--- a/src/App.js
+++ b/src/App.js
@@ -421,6 +421,7 @@ function App() {
                   guestSideOfClerk={guestSideOfClerk}
                   removeConnectedGuestSides={rmConnectedGuestSides}
                   setModal={setModal} // Pass the function to open modal
+                  loading={shop.name==null}
                 />
                 <Footer
                   showTable={true}
diff --git a/src/components/Header.js b/src/components/Header.js
index 0468191..8d38bd4 100644
--- a/src/components/Header.js
+++ b/src/components/Header.js
@@ -20,7 +20,7 @@ const Title = styled.h2`
   font-family: "Poppins", sans-serif;
   font-weight: 500;
   font-style: normal;
-  font-size: 32px;
+  font-size: 6vw;
   color: rgba(88, 55, 50, 1);
 `;
 
@@ -91,6 +91,7 @@ const ProfileImage = styled.img`
   width: 60px;
   height: 60px;
   border-radius: 50%;
+  object-fit: contain;
   cursor: pointer;
   z-index: 199;
   animation: ${(props) => {
diff --git a/src/components/Item.module.css b/src/components/Item.module.css
index c285cf4..0634860 100644
--- a/src/components/Item.module.css
+++ b/src/components/Item.module.css
@@ -5,7 +5,6 @@
 }
 
 .item {
-  border-top: 2px solid #00000017;
   display: flex;
   align-items: stretch;
   justify-content: space-between;
@@ -20,7 +19,9 @@
   padding-top: 10px;
   margin-bottom: -3px;
 }
-
+.item:not(.itemInvoice) {
+  border-top: 2px solid #00000017;
+}
 .itemInvoice {
   flex-direction: row;
   align-items: center;
diff --git a/src/components/ItemLister.module.css b/src/components/ItemLister.module.css
index baf7e43..3803883 100644
--- a/src/components/ItemLister.module.css
+++ b/src/components/ItemLister.module.css
@@ -90,8 +90,8 @@
   z-index: 100;
   background-color: #0000008c;
   width: 100%;
-  top: 0;
-  bottom: 0;
+  top: 7px;
+  bottom: -10px;
   display: flex;
   align-items: center;
   justify-content: center;
diff --git a/src/components/MusicPlayer.css b/src/components/MusicPlayer.css
index fdec5c9..2323709 100644
--- a/src/components/MusicPlayer.css
+++ b/src/components/MusicPlayer.css
@@ -147,7 +147,7 @@
 }
 
 .expand-button:hover {
-  background-color: rgb(29, 185, 84);
+  background-color: #73a585;
 }
 
 /* Adjust height of the music player container when expanded */
diff --git a/src/components/MusicPlayer.js b/src/components/MusicPlayer.js
index c04742c..fb554bc 100644
--- a/src/components/MusicPlayer.js
+++ b/src/components/MusicPlayer.js
@@ -28,6 +28,11 @@ export function MusicPlayer({ socket, shopId, user, isSpotifyNeedLogin }) {
   const [subtitleBG, setSubtitleBG] = useState("white");
   const [backgroundImage, setBackgroundImage] = useState("");
 
+
+  const [videoSrc, setVideoSrc] = useState('');
+  const videoRef = useRef(null);
+
+
   useEffect(() => {
     const getDominantColor = async (imageSrc) => {
       return new Promise((resolve, reject) => {
@@ -144,6 +149,40 @@ export function MusicPlayer({ socket, shopId, user, isSpotifyNeedLogin }) {
     };
   }, [socket]);
 
+  // useEffect for setting up the socket listener
+  useEffect(() => {
+    const handleUpdateCanvas = (response) => {
+      if (response) {
+
+        fetch(response)
+          .then((response) => response.blob())
+          .then((blob) => {
+            const blobUrl = URL.createObjectURL(blob);
+            setVideoSrc(blobUrl);
+
+            if (videoRef.current) {
+              videoRef.current.load(); // Reload the video element
+            }
+          })
+          .catch((error) => console.error('Error loading video:', error));
+      }
+      else{
+        setVideoSrc('');
+        if (videoRef.current) {
+          videoRef.current.load(); // Reload the video element
+        }
+      }
+    };
+
+    // Listen for the "updateCanvas" event
+    socket.on("updateCanvas", handleUpdateCanvas);
+
+    // Clean up the socket listener when the component is unmounted
+    return () => {
+      socket.off("updateCanvas", handleUpdateCanvas);
+    };
+  }, [socket]);
+
   useEffect(() => {
     // Simulate progress every 100ms
     const interval = setInterval(() => {
@@ -308,39 +347,47 @@ export function MusicPlayer({ socket, shopId, user, isSpotifyNeedLogin }) {
 
 
   return (
-    <div className={`music-player`}  style={{ marginBottom: `${viewing? '-10px' : ''}` }}>
+    <div className={`music-player`} style={{ marginBottom: `${viewing ? '-10px' : ''}` }}>
       <div
-       onClick={toggleView}
+        onClick={toggleView}
         className="current-bgr"
-        style={{ backgroundImage: `url(${backgroundImage})` }}
+        style={{ backgroundImage: `url(${videoSrc != ""? '':backgroundImage})` }}
       >
-        {currentLines.past.map((line, index) => (
-          <div className="past" style={{ color: subtitleColor, 
-            textShadow: `2px 2px 2px ${subtitleBG}`, }} key={index}>
-            <p>{line.words}</p>
-          </div>
-        ))}
+        <video
+          ref={videoRef}
+          autoPlay
+          loop
+          playsInline
+          muted
+          style={{ height: '100%', width: '100%', objectFit: 'cover', position:'absolute', top:0,right:0,zIndex:-1}}
+        >
+          {videoSrc && <source src={videoSrc} type="video/mp4" />}
+        </video>
         {currentLines.present.map((line, index) => (
-          <div className="present"  style={{ color: subtitleColor, 
-            textShadow: `2px 2px 2px ${subtitleBG}`, }} key={index}>
+          <div className="present" style={{
+            color: subtitleColor,
+            textShadow: `2px 2px 2px ${subtitleBG}`,
+          }} key={index}>
             <p>{line.words}</p>
           </div>
         ))}
         {currentLines.future.map((line, index) => (
-          <div className="future"  style={{ color: subtitleColor, 
-            textShadow: `2px 2px 2px ${subtitleBG}`, }} key={index}>
+          <div className="future" style={{
+            color: subtitleColor,
+            textShadow: `2px 2px 2px ${subtitleBG}`,
+          }} key={index}>
             <p>{line.words}</p>
           </div>
         ))}
       </div>
 
       <div className="current-info" >
-        <div 
-      className={`current-name ${viewing? '' : 'animated-text'}`} style={{margin:`${viewing? '35px 30px' : '13px 30px'}`}}>
+        <div
+          className={`current-name ${viewing ? '' : 'animated-text'}`} style={{ margin: `${viewing ? '35px 30px' : '13px 30px'}` }}>
           {currentSong.item && currentSong.item.name
-            ? (viewing? currentSong.item.name:text)
-            : 
-            viewing? messages[0]:text}
+            ? (viewing ? currentSong.item.name : text)
+            :
+            viewing ? messages[0] : text}
         </div>
         {viewing && <>
           <div className="current-artist">
@@ -377,78 +424,78 @@ export function MusicPlayer({ socket, shopId, user, isSpotifyNeedLogin }) {
         }
       </div>
       {viewing &&
-      <>
-      <div
-        className={`expandable-container ${expanded ? "expanded" : ""}`}
-        ref={expandableContainerRef}
-      >
-        {user.cafeId != null && user.cafeId == shopId && (
-          <div className="auth-box">
-            <input
-              type="text"
-              placeholder={
-                isSpotifyNeedLogin ? "Login Spotify" : "Logout Spotify"
-              }
-              onClick={handleSpotifyAuth}
-            />
-          </div>
-        )}
-        <div className="search-box">
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 24 24"
-            className="search-icon"
+        <>
+          <div
+            className={`expandable-container ${expanded ? "expanded" : ""}`}
+            ref={expandableContainerRef}
           >
-            <path d="M10.533 1.27893C5.35215 1.27893 1.12598 5.41887 1.12598 10.5579C1.12598 15.697 5.35215 19.8369 10.533 19.8369C12.767 19.8369 14.8235 19.0671 16.4402 17.7794L20.7929 22.132C21.1834 22.5226 21.8166 22.5226 22.2071 22.132C22.5976 21.7415 22.5976 21.1083 22.2071 20.7178L17.8634 16.3741C19.1616 14.7849 19.94 12.7634 19.94 10.5579C19.94 5.41887 15.7138 1.27893 10.533 1.27893ZM3.12598 10.5579C3.12598 6.55226 6.42768 3.27893 10.533 3.27893C14.6383 3.27893 17.94 6.55226 17.94 10.5579C17.94 14.5636 14.6383 17.8369 10.533 17.8369C6.42768 17.8369 3.12598 14.5636 3.12598 10.5579Z" />
-          </svg>
-          <input
-            type="text"
-            placeholder="Search..."
-            value={songName}
-            onChange={handleInputChange}
-          />
-        </div>
+            {user.cafeId != null && user.cafeId == shopId && (
+              <div className="auth-box">
+                <input
+                  type="text"
+                  placeholder={
+                    isSpotifyNeedLogin ? "Login Spotify" : "Logout Spotify"
+                  }
+                  onClick={handleSpotifyAuth}
+                />
+              </div>
+            )}
+            <div className="search-box">
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 24 24"
+                className="search-icon"
+              >
+                <path d="M10.533 1.27893C5.35215 1.27893 1.12598 5.41887 1.12598 10.5579C1.12598 15.697 5.35215 19.8369 10.533 19.8369C12.767 19.8369 14.8235 19.0671 16.4402 17.7794L20.7929 22.132C21.1834 22.5226 21.8166 22.5226 22.2071 22.132C22.5976 21.7415 22.5976 21.1083 22.2071 20.7178L17.8634 16.3741C19.1616 14.7849 19.94 12.7634 19.94 10.5579C19.94 5.41887 15.7138 1.27893 10.533 1.27893ZM3.12598 10.5579C3.12598 6.55226 6.42768 3.27893 10.533 3.27893C14.6383 3.27893 17.94 6.55226 17.94 10.5579C17.94 14.5636 14.6383 17.8369 10.533 17.8369C6.42768 17.8369 3.12598 14.5636 3.12598 10.5579Z" />
+              </svg>
+              <input
+                type="text"
+                placeholder="Search..."
+                value={songName}
+                onChange={handleInputChange}
+              />
+            </div>
 
-        {songName != "" &&
-          songs.map((song, index) => (
-            <MusicComponent
-              key={index}
-              song={song}
-              min={0}
-              max={100}
-              onDecision={(e) => onRequest(song.trackId)}
-            />
-          ))}
-        {songName == "" &&
-          queue.length > 0 &&
-          queue.map((song, index) => (
-            <MusicComponent
-              key={index}
-              song={song}
-              min={-100}
-              max={100}
-              onDecision={(vote) => onDecision(song.trackId, vote)}
-            />
-          ))}
-        {songName == "" && queue.length < 1 && (
-          <div className="rectangle">
-            <div className="diagonal-text">No Beats Ahead - Drop Your Hits</div>
+            {songName != "" &&
+              songs.map((song, index) => (
+                <MusicComponent
+                  key={index}
+                  song={song}
+                  min={0}
+                  max={100}
+                  onDecision={(e) => onRequest(song.trackId)}
+                />
+              ))}
+            {songName == "" &&
+              queue.length > 0 &&
+              queue.map((song, index) => (
+                <MusicComponent
+                  key={index}
+                  song={song}
+                  min={-100}
+                  max={100}
+                  onDecision={(vote) => onDecision(song.trackId, vote)}
+                />
+              ))}
+            {songName == "" && queue.length < 1 && (
+              <div className="rectangle">
+                <div className="diagonal-text">No Beats Ahead - Drop Your Hits</div>
+              </div>
+            )}
+            {songName == "" && queue.length > 0 && queue.length < 3 && (
+              <div className="rectangle">
+                <div className="diagonal-text">Drop Your Hits</div>
+              </div>
+            )}
           </div>
-        )}
-        {songName == "" && queue.length > 0 && queue.length < 3 && (
-          <div className="rectangle">
-            <div className="diagonal-text">Drop Your Hits</div>
-          </div>
-        )}
-      </div>
-      <div className="expand-button" onClick={toggleExpand}>
-        <h5>
-          {expanded
-            ? "︿"
-            : "request your song"}
-        </h5>
-      </div></>
-}
+          <div className="expand-button" onClick={toggleExpand}>
+            <h5>
+              {expanded
+                ? "︿"
+                : "request your song"}
+            </h5>
+          </div></>
+      }
     </div>
   );
 }
diff --git a/src/config.js b/src/config.js
index 03bd13a..967c5ce 100644
--- a/src/config.js
+++ b/src/config.js
@@ -1,5 +1,5 @@
 // src/config.js
 
-const API_BASE_URL = 'https://9qc65z-5000.csb.app';
+const API_BASE_URL = 'https://api.kedaimaster.com';
 
 export default API_BASE_URL;
diff --git a/src/pages/CafePage.js b/src/pages/CafePage.js
index c081595..0138677 100644
--- a/src/pages/CafePage.js
+++ b/src/pages/CafePage.js
@@ -38,6 +38,7 @@ function CafePage({
   guestSideOfClerk,
   removeConnectedGuestSides,
   setModal,
+  loading,
 }) {
   const location = useLocation();
   const [searchParams] = useSearchParams();
@@ -47,7 +48,6 @@ function CafePage({
 
   const navigate = useNavigate();
 
-  const [loading, setLoading] = useState(true);
   const [screenMessage, setScreenMessage] = useState("");
 
   const [isSpotifyNeedLogin, setNeedSpotifyLogin] = useState(true);
@@ -117,7 +117,6 @@ function CafePage({
       socket.on("joined-room", (response) => {
         const { isSpotifyNeedLogin } = response;
         setNeedSpotifyLogin(isSpotifyNeedLogin);
-        setLoading(false);
       });
     }
 
diff --git a/src/pages/WelcomePage.css b/src/pages/WelcomePage.css
index 17f0f0c..592ef00 100644
--- a/src/pages/WelcomePage.css
+++ b/src/pages/WelcomePage.css
@@ -20,7 +20,7 @@
 .circular-image {
   width: 100%;
   height: 100%;
-  object-fit: cover;
+  object-fit: contain;
 }
 
 .welcoming-text {