diff --git a/src/App.css b/src/App.css
index 22791ee..ae514e6 100644
--- a/src/App.css
+++ b/src/App.css
@@ -1,80 +1,89 @@
 #root {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-  text-align: center;
+	max-width: 1280px;
+	margin: 0 auto;
+	padding: 2rem;
+	text-align: center;
 }
 
 .logo {
-  height: 6em;
-  padding: 1.5em;
-  will-change: filter;
-  transition: filter 300ms;
+	height: 6em;
+	padding: 1.5em;
+	will-change: filter;
+	transition: filter 300ms;
 }
 .logo:hover {
-  filter: drop-shadow(0 0 2em #646cffaa);
+	filter: drop-shadow(0 0 2em #646cffaa);
 }
 .logo.react:hover {
-  filter: drop-shadow(0 0 2em #61dafbaa);
+	filter: drop-shadow(0 0 2em #61dafbaa);
 }
 
 @keyframes logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
+	from {
+		transform: rotate(0deg);
+	}
+	to {
+		transform: rotate(360deg);
+	}
 }
 
 @media (prefers-reduced-motion: no-preference) {
-  a:nth-of-type(2) .logo {
-    animation: logo-spin infinite 20s linear;
-  }
+	a:nth-of-type(2) .logo {
+		animation: logo-spin infinite 20s linear;
+	}
 }
 
 .card {
-  padding: 2em;
+	padding: 2em;
 }
 
 .read-the-docs {
-  color: #888;
+	color: #888;
 }
 
 .board {
-  display: flex;
-  flex-direction: column;
-  row-gap: 5px;
+	display: flex;
+	flex-direction: column;
+	row-gap: 5px;
 }
 
 .row {
-  display: flex;
-  flex-direction: row;
-  column-gap: 5px;
+	display: flex;
+	flex-direction: row;
+	column-gap: 5px;
 }
 
 .letter {
-  width: 62px;
-  height: 62px;
-  border: 2px solid #3a3a3c;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  font-size: 2rem;
-  line-height: 1;
-  font-weight: bold;
+	width: 62px;
+	height: 62px;
+	border: 2px solid #3a3a3c;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	font-size: 2rem;
+	line-height: 1;
+	font-weight: bold;
 }
 
 .letter.incorrect {
-  background: #3a3a3c;
+	/* background: #3a3a3c; */
+	background: #888;
 }
 
 .letter.correct {
-  background: #538d4e;
-  border-color: #538d4e;
+	background: #538d4e;
+	border-color: #538d4e;
 }
 
 .letter.nearby {
-  background: #b59f3b;
-  border-color: #b59f3b;
+	background: #b59f3b;
+	border-color: #b59f3b;
+}
+
+/* keep the p tag in the dom, to avoid grid shifting */
+.visible {
+	visibility: visible;
+}
+.invisible {
+	visibility: hidden;
 }
diff --git a/src/App.tsx b/src/App.tsx
index 4394748..5a56559 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -31,6 +31,11 @@ function App() {
 	const [gameLost, setGameLost] = useState(false)
 	const [gameOver, setGameOver] = useState(false)
 
+	const [wordList, setWordList] = useState<string[]>([])
+	// Added state for invalid word error
+	const [invalidWordError, setInvalidWordError] = useState(false)
+	const [invalidWordRowIndex, setInvalidWordRowIndex] = useState(-1)
+
 	// Load the list of all 5 letter words
 	useEffect(() => {
 		const fetchWords = async () => {
@@ -39,6 +44,8 @@ function App() {
 			const randomIndex = Math.floor(Math.random() * words.length)
 			const randomWord = words[randomIndex] as string
 			setWordleSolution(randomWord.toUpperCase())
+			// set word list for row submission validation
+			setWordList(words)
 		}
 
 		fetchWords().catch(error => {
@@ -72,8 +79,17 @@ function App() {
 					JSON.stringify(guessedLetters),
 				) as typeof guessedLetters
 				const currentRow = newGuessedLetters[currentRowIndex]
+
 				// TODO: Check if current row submission already exists in previous row submissions and don't accept if true
-				// TODO: Check if current row submission is not in the list of words and throw invalid word error if true
+
+				//Check if current row submission is not in the list of words and throw invalid word error if true
+				const isValidWord = wordList.includes(currentRow.join('').toLowerCase())
+				if (!isValidWord) {
+					setInvalidWordError(true)
+					setInvalidWordRowIndex(currentRowIndex) // Store the index of the invalid word
+					return // prevent user going to next row after invalid error thrown
+				}
+
 				const newUserSolution = [...userSolution]
 				newUserSolution[currentRowIndex] = currentRow.join('')
 				setUserSolution(newUserSolution)
@@ -82,6 +98,7 @@ function App() {
 				const newGuessedLetters = JSON.parse(
 					JSON.stringify(guessedLetters),
 				) as typeof guessedLetters
+
 				const currentRow = newGuessedLetters[currentRowIndex]
 				const lastLetterIndex = currentRow.findIndex(
 					(letter: string) => letter === '',
@@ -126,6 +143,10 @@ function App() {
 
 	return (
 		<div className="board">
+			<p className={`${invalidWordError ? 'visible' : 'invisible'}`}>
+				Not in word list!
+			</p>
+
 			{guessedLetters.map((row, rowIndex) => {
 				return (
 					<div className="row" key={uuidv4()}>
@@ -140,7 +161,8 @@ function App() {
 							if (
 								wordleSolution === '' ||
 								letter === '' ||
-								userSolution[rowIndex] === ''
+								userSolution[rowIndex] === '' ||
+								(invalidWordError && rowIndex === invalidWordRowIndex)
 							) {
 								className = ''
 							} else if (letterIdxInWordleSolution === -1) {