diff --git a/app/AppContext.tsx b/app/AppContext.tsx
index 7261041..664186e 100644
--- a/app/AppContext.tsx
+++ b/app/AppContext.tsx
@@ -41,16 +41,18 @@ export function AppProvider({ children }: { children: ReactNode }) {
 	});
 
 	useEffect(() => {
-		const cardIndex = tilt.findIndex((tilt) => !!tilt);
+		if (localSettings.remoteTilt) {
+			const cardIndex = tilt.findIndex((tilt) => !!tilt);
 
-		if (tilt[cardIndex]) {
-			emitTilt(cardIndex, tilt[cardIndex]);
-		} else {
-			// cardIndex does not matter
-			// all tilts for this user will be cleared
-			emitTilt(0, { rotateX: 0, rotateY: 0 });
+			if (tilt[cardIndex]) {
+				emitTilt(cardIndex, tilt[cardIndex]);
+			} else {
+				// cardIndex does not matter
+				// all tilts for this user will be cleared
+				emitTilt(0, { rotateX: 0, rotateY: 0 });
+			}
 		}
-	}, [tilt]);
+	}, [tilt, localSettings]);
 
 	const handleSelect = (cardID: string) => {
 		setSelectCardIndex(-1);
diff --git a/components/TiltCard.tsx b/components/TiltCard.tsx
index 413eb5b..87902f2 100644
--- a/components/TiltCard.tsx
+++ b/components/TiltCard.tsx
@@ -14,8 +14,9 @@ export default function TiltCard({
 	const cardRef = useRef<HTMLDivElement>(null);
 	const {
 		gameData,
-		settings: { tilt },
+		settings: { tilt, remoteTilt },
 		setTilt,
+		tilt: localTilts,
 	} = useAppContext();
 
 	useEffect(() => {
@@ -23,32 +24,44 @@ export default function TiltCard({
 		if (!card) return;
 
 		if (tilt) {
-			const tilts = gameData.tilts[cardIndex];
-			if (!tilts.length) {
-				card.style.transform = `rotateX(0deg) rotateY(0deg)`;
-				return;
-			}
+			if (remoteTilt) {
+				const tilts = gameData.tilts[cardIndex];
+				if (!tilts.length) {
+					card.style.transform = `rotateX(0deg) rotateY(0deg)`;
+					return;
+				}
 
-			const { totalX, totalY } = tilts.reduce(
-				({ totalX, totalY }, { rotateX, rotateY }) => ({
-					totalX: totalX + rotateX,
-					totalY: totalY + rotateY,
-				}),
-				{ totalX: 0, totalY: 0 },
-			);
+				const { totalX, totalY } = tilts.reduce(
+					({ totalX, totalY }, { rotateX, rotateY }) => ({
+						totalX: totalX + rotateX,
+						totalY: totalY + rotateY,
+					}),
+					{ totalX: 0, totalY: 0 },
+				);
 
-			const rotateX = totalX / tilts.length;
-			const rotateY = totalY / tilts.length;
+				const rotateX = totalX / tilts.length;
+				const rotateY = totalY / tilts.length;
 
-			if (rotateX || rotateY) {
-				card.style.transform = `rotateX(${rotateX}deg) rotateY(${rotateY}deg)`;
+				if (rotateX || rotateY) {
+					card.style.transform = `rotateX(${rotateX}deg) rotateY(${rotateY}deg)`;
+				} else {
+					card.style.transform = `rotateX(0deg) rotateY(0deg)`;
+				}
 			} else {
-				card.style.transform = `rotateX(0deg) rotateY(0deg)`;
+				console.log(localTilts);
+				const rotateX = localTilts[cardIndex]?.rotateX || 0;
+				const rotateY = localTilts[cardIndex]?.rotateY || 0;
+
+				if (rotateX || rotateY) {
+					card.style.transform = `rotateX(${rotateX}deg) rotateY(${rotateY}deg)`;
+				} else {
+					card.style.transform = `rotateX(0deg) rotateY(0deg)`;
+				}
 			}
 		} else if (card.style.transform !== 'rotateX(0deg) rotateY(0deg)') {
 			card.style.transform = 'rotateX(0deg) rotateY(0deg)';
 		}
-	}, [tilt, gameData]);
+	}, [tilt, localTilts, gameData]);
 
 	const handleMouseMove = (e: React.MouseEvent) => {
 		const card = cardRef.current;