diff --git a/fairplay/src/components/About/About.module.css b/fairplay/src/components/About/About.module.css
index 17fb123..6fa660f 100644
--- a/fairplay/src/components/About/About.module.css
+++ b/fairplay/src/components/About/About.module.css
@@ -2,4 +2,12 @@
 	color: black;
 	width: 80%;
 	margin: auto;
+	background-color: rgba(
+		89,
+		75,
+		61,
+		0.8
+	); /* White background with decreased opacity */
+	border-radius: 10px; /* Rounded corners */
+	padding: 30px; /* Add padding */
 }
diff --git a/fairplay/src/components/ChatBox/Chatbot.jsx b/fairplay/src/components/ChatBox/Chatbot.jsx
index ff913f8..738569a 100644
--- a/fairplay/src/components/ChatBox/Chatbot.jsx
+++ b/fairplay/src/components/ChatBox/Chatbot.jsx
@@ -16,7 +16,7 @@ const Chatbot = () => {
 		const apiEndpoint = "https://api.openai.com/v1/chat/completions";
 		const headers = {
 			"Content-Type": "application/json",
-			Authorization: ` Bearer ${config.OPENAI_API_KEY}`,
+			Authorization: ` Bearer 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`,
 		};
 
 		// Get the last 10 messages
diff --git a/fairplay/src/components/ChatBox/Chatbot.module.css b/fairplay/src/components/ChatBox/Chatbot.module.css
index fca09da..9b36b6a 100644
--- a/fairplay/src/components/ChatBox/Chatbot.module.css
+++ b/fairplay/src/components/ChatBox/Chatbot.module.css
@@ -2,6 +2,7 @@
 
 body {
 	font-family: "Frank Ruhl Libre", sans-serif;
+	color: #4d270a;
 }
 
 .chatbotInputForm input::placeholder {
diff --git a/fairplay/src/components/CipherForm copy/CipherForm.jsx b/fairplay/src/components/CipherForm copy/CipherForm.jsx
new file mode 100644
index 0000000..7eaa6e4
--- /dev/null
+++ b/fairplay/src/components/CipherForm copy/CipherForm.jsx	
@@ -0,0 +1,82 @@
+import React, { useState } from "react";
+import FiveFiveStatic from "../FiveFiveStatic/FiveFiveStatic";
+import FilterInputText from "../FilterInputText/FilterInputText";
+import { encryptByPlayfairCipher } from "./encrypt";
+import { decryptByPlayfairCipher } from "./decrypt";
+import SubstringDisplay from "../SubstringDisplay/SubstringDisplay";
+
+function CipherForm() {
+	const [plainText, setPlainText] = useState("");
+	const [key, setKey] = useState("");
+	const [cipherText, setCipherText] = useState("");
+	const [decryptedText, setDecryptedText] = useState("");
+	const [showEmptyCipher, setShowEmptyCipher] = useState(true);
+
+	const handlePlainTextChange = (e) => {
+		setPlainText(e.target.value.replace(/\s/g, ""));
+	};
+
+	const handleKeyChange = (e) => {
+		setKey(e.target.value);
+	};
+
+	const handleSubmit = (e) => {
+		e.preventDefault();
+
+		// Encrypt the plain text
+		setCipherText(
+			encryptByPlayfairCipher(plainText.replace(/\s/g, ""), key).toUpperCase()
+		);
+	};
+
+	const handleDecrypt = () => {
+		// Decrypt the cipher text
+		setDecryptedText(decryptByPlayfairCipher(cipherText, key).toUpperCase());
+	};
+
+	return (
+		<div>
+			<form onSubmit={handleSubmit}>
+				<div>
+					<div>
+						<label htmlFor="plainText">Plain Text:</label>
+						<input
+							type="text"
+							id="plainText"
+							value={plainText}
+							onChange={handlePlainTextChange}
+						/>
+					</div>
+					<br />
+					{plainText ? ( // Conditionally render FilterInputText if plainText is not empty
+						<FilterInputText inputString={plainText} />
+					) : (
+						<SubstringDisplay
+							substrings={[]}
+							length={0}
+							first={true}
+							encrypted={false}
+						/>
+					)}
+					<br />
+					<label htmlFor="key">Key:</label>
+					<input type="text" id="key" value={key} onChange={handleKeyChange} />
+				</div>
+
+				<br />
+				<FiveFiveStatic cipherText={key} />
+				<br />
+
+				<button type="submit">Encrypt</button>
+			</form>
+
+			<button onClick={handleDecrypt}>Decrypt</button>
+			<br />
+			{cipherText && <div>Encrypted Text: {cipherText}</div>}
+			<br />
+			{decryptedText && <div>Decrypted Text: {decryptedText}</div>}
+		</div>
+	);
+}
+
+export default CipherForm;
diff --git a/fairplay/src/components/CipherForm copy/decrypt.js b/fairplay/src/components/CipherForm copy/decrypt.js
new file mode 100644
index 0000000..806d9ae
--- /dev/null
+++ b/fairplay/src/components/CipherForm copy/decrypt.js	
@@ -0,0 +1,130 @@
+export function generateKeyTable(key, ks, keyT) {
+	let i,
+		j,
+		k,
+		flag = 0;
+
+	// a 26 character hashmap
+	// to store count of the alphabet
+	let dicty = new Array(26).fill(0);
+	for (i = 0; i < ks; i++) {
+		let r = key[i].charCodeAt(0) - 97;
+
+		if (key[i] !== "j") {
+			dicty[r] = 2;
+		}
+	}
+
+	dicty["j".charCodeAt(0) - 97] = 1;
+	i = 0;
+	j = 0;
+
+	for (k = 0; k < ks; k++) {
+		let r = key[k].charCodeAt(0) - 97;
+		if (dicty[r] === 2) {
+			dicty[r] -= 1;
+			keyT[i][j] = key[k];
+			j++;
+			if (j === 5) {
+				i++;
+				j = 0;
+			}
+		}
+	}
+
+	for (k = 0; k < 26; k++) {
+		if (dicty[k] === 0) {
+			keyT[i][j] = String.fromCharCode(k + 97);
+			j++;
+			if (j === 5) {
+				i++;
+				j = 0;
+			}
+		}
+	}
+	return keyT;
+}
+
+export function mod5(n) {
+	return ((n % 5) + 5) % 5;
+}
+
+export function decrypt(str, keyT, ps) {
+	let i;
+	let a = new Array(4).fill(0);
+	let newstr = new Array(ps);
+
+	function mod5(n) {
+		return ((n % 5) + 5) % 5;
+	}
+
+	for (i = 0; i < ps; i += 2) {
+		let brr = search(keyT, str[i], str[i + 1], a);
+		let k1 = brr[0];
+		let k2 = brr[1];
+		let k3 = brr[2];
+		let k4 = brr[3];
+		if (k1 === k3) {
+			newstr[i] = keyT[k1][mod5(k2 - 1)];
+			newstr[i + 1] = keyT[k1][mod5(k4 - 1)];
+		} else if (k2 === k4) {
+			newstr[i] = keyT[mod5(k1 - 1)][k2];
+			newstr[i + 1] = keyT[mod5(k3 - 1)][k2];
+		} else {
+			newstr[i] = keyT[k1][k4];
+			newstr[i + 1] = keyT[k3][k2];
+		}
+	}
+	let res = "";
+
+	for (let i = 0; i < newstr.length; i++) {
+		res += newstr[i];
+	}
+
+	return res;
+}
+
+export function search(keyT, a, b, arr) {
+	let i, j;
+
+	if (a === "j") a = "i";
+	else if (b === "j") b = "i";
+
+	for (i = 0; i < 5; i++) {
+		for (j = 0; j < 5; j++) {
+			if (keyT[i][j] === a) {
+				arr[0] = i;
+				arr[1] = j;
+			} else if (keyT[i][j] === b) {
+				arr[2] = i;
+				arr[3] = j;
+			}
+		}
+	}
+	return arr;
+}
+
+// export export function to make the plain text length to be even
+export function prepare(str, ptrs) {
+	if (ptrs % 2 !== 0) {
+		str += "z";
+	}
+
+	return [str, ptrs];
+}
+
+// export function to decrypt using Playfair Cipher
+export function decryptByPlayfairCipher(str, key) {
+	let ps, ks;
+	let keyT = new Array(5).fill(null).map(() => new Array(5));
+
+	str = str.trim().toLowerCase();
+	key = key.trim().toLowerCase();
+
+	ps = str.length;
+	ks = key.length;
+	[str, ps] = prepare(str, ps);
+
+	let kt = generateKeyTable(key, ks, keyT);
+	return decrypt(str, kt, ps);
+}
diff --git a/fairplay/src/components/CipherForm copy/encrypt.js b/fairplay/src/components/CipherForm copy/encrypt.js
new file mode 100644
index 0000000..1a91bc0
--- /dev/null
+++ b/fairplay/src/components/CipherForm copy/encrypt.js	
@@ -0,0 +1,123 @@
+export function generateKeyTable(key, ks, keyT) {
+	let i,
+		j,
+		k,
+		flag = 0;
+
+	// a 26 character hashmap
+	// to store count of the alphabet
+	let dicty = new Array(26).fill(0);
+	for (i = 0; i < ks; i++) {
+		let r = key[i].charCodeAt(0) - 97;
+
+		if (key[i] !== "j") {
+			dicty[r] = 2;
+		}
+	}
+
+	dicty["j".charCodeAt(0) - 97] = 1;
+	i = 0;
+	j = 0;
+
+	for (k = 0; k < ks; k++) {
+		let r = key[k].charCodeAt(0) - 97;
+		if (dicty[r] === 2) {
+			dicty[r] -= 1;
+			keyT[i][j] = key[k];
+			j++;
+			if (j === 5) {
+				i++;
+				j = 0;
+			}
+		}
+	}
+
+	for (k = 0; k < 26; k++) {
+		if (dicty[k] === 0) {
+			keyT[i][j] = String.fromCharCode(k + 97);
+			j++;
+			if (j === 5) {
+				i++;
+				j = 0;
+			}
+		}
+	}
+	return keyT;
+}
+
+// export export function to search for the characters of a digraph
+// in the key square and return their position
+export function search(keyT, a, b, arr) {
+	let i, j;
+
+	if (a === "j") a = "i";
+	else if (b === "j") b = "i";
+
+	for (i = 0; i < 5; i++) {
+		for (j = 0; j < 5; j++) {
+			if (keyT[i][j] === a) {
+				arr[0] = i;
+				arr[1] = j;
+			} else if (keyT[i][j] === b) {
+				arr[2] = i;
+				arr[3] = j;
+			}
+		}
+	}
+	return arr;
+}
+
+// export export function to make the plain text length to be even
+export function prepare(str, ptrs) {
+	if (ptrs % 2 !== 0) {
+		str += "z";
+	}
+
+	return [str, ptrs];
+}
+
+// export export function for performing the encryption
+export function encrypt(str, keyT, ps) {
+	let i;
+	let a = new Array(4).fill(0);
+	let newstr = new Array(ps);
+
+	for (i = 0; i < ps; i += 2) {
+		let brr = search(keyT, str[i], str[i + 1], a);
+		let k1 = brr[0];
+		let k2 = brr[1];
+		let k3 = brr[2];
+		let k4 = brr[3];
+		if (k1 === k3) {
+			newstr[i] = keyT[k1][(k2 + 1) % 5];
+			newstr[i + 1] = keyT[k1][(k4 + 1) % 5];
+		} else if (k2 === k4) {
+			newstr[i] = keyT[(k1 + 1) % 5][k2];
+			newstr[i + 1] = keyT[(k3 + 1) % 5][k2];
+		} else {
+			newstr[i] = keyT[k1][k4];
+			newstr[i + 1] = keyT[k3][k2];
+		}
+	}
+	let res = "";
+
+	for (let i = 0; i < newstr.length; i++) {
+		res += newstr[i];
+	}
+	return res;
+}
+
+export function encryptByPlayfairCipher(str, key) {
+	let ps, ks;
+	let keyT = new Array(5).fill(null).map(() => new Array(5));
+
+	str = str.trim().toLowerCase();
+	key = key.trim().toLowerCase();
+
+	ps = str.length;
+	ks = key.length;
+	[str, ps] = prepare(str, ps);
+
+	let kt = generateKeyTable(key, ks, keyT);
+	return encrypt(str, kt, ps);
+}
diff --git a/fairplay/src/components/CipherForm/ChipherForm.css b/fairplay/src/components/CipherForm/ChipherForm.css
index 246ee86..1537289 100644
--- a/fairplay/src/components/CipherForm/ChipherForm.css
+++ b/fairplay/src/components/CipherForm/ChipherForm.css
@@ -1,59 +1,74 @@
 .Main {
-    margin: 20px;
-    padding: 20px;
-    border: 1px solid #bca1a1;
-    border-radius: 5px;
-    background-color: rgba(89, 75, 61, 0.8);
-
-    width: fit-content;
+	margin: 20px;
+	padding: 20px;
+	border: 1px solid #bca1a1;
+	border-radius: 5px;
+	background-color: rgba(89, 75, 61, 0.8);
+	width: 60%;
+	margin: auto;
 }
 
-.CipherForm{
-    
-
-    background-color: transparent;
-
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: top;
-
+.CipherForm {
+	background-color: rgba(89, 75, 61, 0.8);
+	width: 80%;
+	margin: auto;
+	padding: 20px;
 }
 
+.flexThing {
+	display: flex;
+	justify-content: space-between;
+	flex-direction: row-reverse;
+}
 
 .Main label {
-    display: block;
-    margin-bottom: 10px;
-    font-weight: bold;
-    color: #ffffff;
-    font-size: 22px;
+  display: block;
+	margin-bottom: 10px;
+	font-weight: bold;
+	color: #000;
+	font-size: 22px;
+
 }
 
 .inputBox {
-    width: 90%;
-    padding: 10px;
-    margin-bottom: 20px;
-    border: 1px solid #888;
-    border-radius: 4px;
-    font-size: 22px;
-    font-family: "Times New Roman", Times, serif;
-    background-color: #f9f9f9;
-    color: #333;
-    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
+	width: 90%;
+	padding: 10px;
+	margin-bottom: 20px;
+	border: 1px solid #888;
+	border-radius: 4px;
+	font-size: 22px;
+	font-family: "Times New Roman", Times, serif;
+	background-color: #f9f9f9;
+	color: #333;
+	box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
 }
 
 .move_button {
-    padding: 10px 20px;
-    margin: 0 10px;
-    background-color: rgba(73, 55, 33, 0.7);
-    color: #fff;
-    border: none;
-    border-radius: 4px;
-    cursor: pointer;
-    transition: background-color 0.3s ease;
-    margin : 20px;
+	padding: 10px 20px;
+	margin: 0 10px;
+	background-color: rgba(73, 55, 33, 0.7);
+	color: #fff;
+	border: none;
+	border-radius: 4px;
+	cursor: pointer;
+	transition: background-color 0.3s ease;
+	margin: 20px;
 }
 
 .move_button:hover {
-    background-color: #954a00; /* Darker blue on hover */
+	background-color: #954a00; /* Darker blue on hover */
+}
+
+.outputText {
+	color: white;
+	font-size: 24px;
+	text-align: center;
+	text-transform: capitalize;
+}
+
+.radioMaybe {
+	display: flex;
+	justify-content: space-around;
+	align-items: center;
+	padding: 10px 0;
 }
diff --git a/fairplay/src/components/CipherForm/CipherForm.jsx b/fairplay/src/components/CipherForm/CipherForm.jsx
index 47d7d95..0048c88 100644
--- a/fairplay/src/components/CipherForm/CipherForm.jsx
+++ b/fairplay/src/components/CipherForm/CipherForm.jsx
@@ -8,15 +8,13 @@ import SubstringDisplay from "../SubstringDisplay/SubstringDisplay";
 import "../CipherForm/ChipherForm.css"; // Import the CSS file
 
 function CipherForm() {
-	const [plainText, setPlainText] = useState("");
+	const [mode, setMode] = useState("encrypt");
+	const [inputText, setInputText] = useState("");
 	const [key, setKey] = useState("");
-	const [cipherText, setCipherText] = useState("");
-	const [decryptedText, setDecryptedText] = useState("");
-	// Remove unused variables
-	// const [showEmptyCipher, setShowEmptyCipher] = useState(true);
+	const [outputText, setOutputText] = useState("");
 
-	const handlePlainTextChange = (e) => {
-		setPlainText(e.target.value.replace(/\s/g, ""));
+	const handleInputChange = (e) => {
+		setInputText(e.target.value.replace(/\s/g, ""));
 	};
 
 	const handleKeyChange = (e) => {
@@ -25,70 +23,110 @@ function CipherForm() {
 
 	const handleSubmit = (e) => {
 		e.preventDefault();
-
-		// Encrypt the plain text
-		setCipherText(
-			encryptByPlayfairCipher(plainText.replace(/\s/g, ""), key).toUpperCase()
-		);
+		if (mode === "encrypt") {
+			setOutputText(
+				encryptByPlayfairCipher(inputText.replace(/\s/g, ""), key).toUpperCase()
+			);
+		} else {
+			setOutputText(
+				decryptByPlayfairCipher(inputText.replace(/\s/g, ""), key).toUpperCase()
+			);
+		}
 	};
 
-	const handleDecrypt = () => {
-		// Decrypt the cipher text
-		setDecryptedText(decryptByPlayfairCipher(cipherText, key).toUpperCase());
+	const handleModeChange = (newMode) => {
+		if (newMode !== mode) {
+			setInputText(""); // Reset input text when mode changes
+			setOutputText(""); // Reset output text when mode changes
+			setMode(newMode);
+		}
 	};
 
 	return (
-		<div className="CipherForm" >
+		<div className="CipherForm">
 			<form onSubmit={handleSubmit}>
-				<div className="Main">
-					<div>
-						<label htmlFor="plainText">Plain Text:</label>
-						<input
-							className="inputBox"
-							type="text"
-							id="plainText"
-							value={plainText}
-							onChange={handlePlainTextChange}
-						/>
+				<div className="flexThing">
+					<div className="Main">
+						<div className="radioMaybe">
+							<label>
+								<input
+									type="radio"
+									value="encrypt"
+									checked={mode === "encrypt"}
+									onChange={() => handleModeChange("encrypt")}
+								/>
+								Encrypt
+							</label>
+							<label>
+								<input
+									type="radio"
+									value="decrypt"
+									checked={mode === "decrypt"}
+									onChange={() => handleModeChange("decrypt")}
+								/>
+								Decrypt
+							</label>
+						</div>
+						<div>
+							<br />
+							<label htmlFor="inputText">
+								{mode === "encrypt" ? "Plain Text:" : "Encrypted Text:"}
+							</label>
+							<input
+								className="inputBox"
+								type="text"
+								id="inputText"
+								value={inputText}
+								onChange={handleInputChange}
+							/>
+						</div>
+						<br />
+						{mode === "encrypt" ? (
+							inputText ? (
+								<FilterInputText inputString={inputText} />
+							) : (
+								<SubstringDisplay
+									substrings={[]}
+									length={0}
+									first={true}
+									encrypted={false}
+								/>
+							)
+						) : null}
+						<br />
+						<div>
+							<label htmlFor="key">Key:</label>
+							<input
+								className="inputBox"
+								type="text"
+								id="key"
+								value={key}
+								onChange={handleKeyChange}
+							/>
+						</div>
 					</div>
+
 					<br />
-					{plainText ? (
-						<FilterInputText inputString={plainText} />
-					) : (
-						<SubstringDisplay
-							substrings={[]}
-							length={0}
-							first={true}
-							encrypted={false}
-						/>
-					)}
+					<FiveFiveStatic cipherText={key} />
 					<br />
-					<div>
-						<label htmlFor="key">Key:</label>
-						<input
-							className="inputBox"
-							type="text"
-							id="key"
-							value={key}
-							onChange={handleKeyChange}
-						/>
-					</div>
 				</div>
 
-				<br />
-				<FiveFiveStatic cipherText={key} />
-				<br />
 
-				<button className="move_button" type="submit">Encrypt</button>
-				<button className="move_button" onClick={handleDecrypt}>Decrypt</button>
+				<button className="move_button" type="submit">
+					{mode === "encrypt" ? "Encrypt" : "Decrypt"}
+				</button>
+			</form>
+
+
 			<br />
-			{cipherText && <div>Encrypted Text: {cipherText}</div>}
+			{outputText && (
+				<div className="outputText">
+					{mode === "encrypt" ? "Encrypted Text:" : "Decrypted Text:"}{" "}
+					{outputText}
+				</div>
+			)}
 			<br />
-			{decryptedText && <div>Decrypted Text: {decryptedText}</div>}
-			
-			</form>
 
-			
 		</div>
 	);
 }
diff --git a/fairplay/src/components/FiveFiveDynamic/FiveFiveDynamic.jsx b/fairplay/src/components/FiveFiveDynamic/FiveFiveDynamic.jsx
index a1c7d58..6710aba 100644
--- a/fairplay/src/components/FiveFiveDynamic/FiveFiveDynamic.jsx
+++ b/fairplay/src/components/FiveFiveDynamic/FiveFiveDynamic.jsx
@@ -102,7 +102,7 @@ const FiveFiveDynamic = () => {
 		setInputString("");
 		setSubstrings([]);
 		setEncryptedSubstrings([]);
-		setFlag(flag === 1);
+		setFlag((flag = 1));
 	};
 
 	// Function to filter the input string
diff --git a/fairplay/src/components/FiveFiveDynamic/FiveFiveDynamic.module.css b/fairplay/src/components/FiveFiveDynamic/FiveFiveDynamic.module.css
index 428755a..19d9dae 100644
--- a/fairplay/src/components/FiveFiveDynamic/FiveFiveDynamic.module.css
+++ b/fairplay/src/components/FiveFiveDynamic/FiveFiveDynamic.module.css
@@ -27,18 +27,15 @@
 	padding: 0;
 	margin: 0;
 	transition: all 0.3s ease;
-
-	border: 2px solid #000;
 }
 
 .inputbox {
-
-    /* Container styles */
-    margin: 20px;
-    padding: 20px;
-    border: 1px solid #bca1a1;
-    border-radius: 5px;
-    background-color: rgba(89, 75, 61,0.8);
+	/* Container styles */
+	margin: 20px;
+	padding: 20px;
+	border: 1px solid #bca1a1;
+	border-radius: 5px;
+	background-color: rgba(89, 75, 61, 0.8);
 }
 
 .inputbox label {
@@ -89,17 +86,15 @@
 }
 
 .move_button {
-
-    /* Button styles */
-    padding: 10px 20px;
-    margin: 0 10px; /* Add space between buttons */
-    background-color: rgba(210, 183, 150,0.7); /* Blue color */
-    color: #fff; /* White text color */
-    border: none;
-    border-radius: 4px;
-    cursor: pointer;
-    transition: background-color 0.3s ease;
-
+	/* Button styles */
+	padding: 10px 20px;
+	margin: 0 10px; /* Add space between buttons */
+	background-color: rgba(210, 183, 150, 0.7); /* Blue color */
+	color: #fff; /* White text color */
+	border: none;
+	border-radius: 4px;
+	cursor: pointer;
+	transition: background-color 0.3s ease;
 }
 
 .move_button:hover {
diff --git a/fairplay/src/components/FiveFiveHighlight/FiveFiveHighlight.module.css b/fairplay/src/components/FiveFiveHighlight/FiveFiveHighlight.module.css
index dc43797..cacad93 100644
--- a/fairplay/src/components/FiveFiveHighlight/FiveFiveHighlight.module.css
+++ b/fairplay/src/components/FiveFiveHighlight/FiveFiveHighlight.module.css
@@ -15,8 +15,8 @@
 	align-items: center;
 }
 
-.box p{
-
+.box p {
+	font-size: 30px;
 }
 
 .box:hover {
@@ -32,9 +32,13 @@
 .row {
 	display: flex;
 	flex-direction: row;
-
 }
 
 .highlight {
-	background-color: rgba(202, 160, 85,0.5); /* Change highlight color as needed */
+	background-color: rgba(
+		202,
+		160,
+		85,
+		0.5
+	); /* Change highlight color as needed */
 }
diff --git a/fairplay/src/components/FiveFiveStatic/FiveFiveStatic.jsx b/fairplay/src/components/FiveFiveStatic/FiveFiveStatic.jsx
index 4282077..75022a5 100644
--- a/fairplay/src/components/FiveFiveStatic/FiveFiveStatic.jsx
+++ b/fairplay/src/components/FiveFiveStatic/FiveFiveStatic.jsx
@@ -2,99 +2,97 @@ import React, { useEffect } from "react";
 import styles from "./FiveFiveStatic.module.css"; // Import the CSS module
 
 const FiveFiveStatic = ({ cipherText }) => {
+	const matrix5x5 = [
+		[1, 2, 3, 4, 5],
+		[6, 7, 8, 9, 10],
+		[11, 12, 13, 14, 15],
+		[16, 17, 18, 19, 20],
+		[21, 22, 23, 24, 25],
+	];
 
-  const matrix5x5 = [
-    [1, 2, 3, 4, 5],
-    [6, 7, 8, 9, 10],
-    [11, 12, 13, 14, 15],
-    [16, 17, 18, 19, 20],
-    [21, 22, 23, 24, 25]
-  ];
+	// Convert the cipher text to uppercase and replace 'J' with 'I'
+	let modifiedCipherText = cipherText
+		.toUpperCase()
+		.replace(/J/g, "I")
+		.replace(/[^A-Z]/g, "");
 
-  // Convert the cipher text to uppercase and replace 'J' with 'I'
-  let modifiedCipherText = cipherText
-    .toUpperCase()
-    .replace(/J/g, "I")
-    .replace(/[^A-Z]/g, "");
+	modifiedCipherText = removeDuplicates(modifiedCipherText);
 
-  modifiedCipherText = removeDuplicates(modifiedCipherText);
+	// Function to remove duplicate characters
+	function removeDuplicates(str) {
+		let uniqueChars = "";
+		for (let char of str) {
+			if (!uniqueChars.includes(char)) {
+				uniqueChars += char;
+			}
+		}
+		return uniqueChars;
+	}
 
-  // Function to remove duplicate characters
-  function removeDuplicates(str) {
-    let uniqueChars = "";
-    for (let char of str) {
-      if (!uniqueChars.includes(char)) {
-        uniqueChars += char;
-      }
-    }
-    return uniqueChars;
-  }
+	// console.log(modifiedCipherText);
+	let ogCipherLength = modifiedCipherText.length;
 
-  // console.log(modifiedCipherText);
-  let ogCipherLength = modifiedCipherText.length;
+	// Create a hash to keep track of letters used
+	const hash = {};
 
-  // Create a hash to keep track of letters used
-  const hash = {};
+	// Iterate over the modifiedCipherText and mark the letters in the hash
+	for (let i = 0; i < modifiedCipherText.length; i++) {
+		if (modifiedCipherText[i] !== " ") {
+			// Exclude spaces
+			hash[modifiedCipherText[i]] = (hash[modifiedCipherText[i]] || 0) + 1;
+			if (modifiedCipherText[i] === "I") hash["J"] = 1; // Mark 'J' as used if 'I' is used
+		}
+	}
 
-  // Iterate over the modifiedCipherText and mark the letters in the hash
-  for (let i = 0; i < modifiedCipherText.length; i++) {
-    if (modifiedCipherText[i] !== " ") {
-      // Exclude spaces
-      hash[modifiedCipherText[i]] = (hash[modifiedCipherText[i]] || 0) + 1;
-      if (modifiedCipherText[i] === "I") hash["J"] = 1; // Mark 'J' as used if 'I' is used
-    }
-  }
+	// Create a string to hold the unique letters for the cipher
+	let uniqueLetters = "";
 
-  // Create a string to hold the unique letters for the cipher
-  let uniqueLetters = "";
+	// Iterate over the alphabet (excluding 'J') and add letters not in the hash to the uniqueLetters string
+	for (
+		let charCode = "A".charCodeAt(0);
+		charCode <= "Z".charCodeAt(0);
+		charCode++
+	) {
+		const letter = String.fromCharCode(charCode);
+		if (letter !== "J" && !hash[letter]) {
+			uniqueLetters += letter;
+		}
+	}
 
-  // Iterate over the alphabet (excluding 'J') and add letters not in the hash to the uniqueLetters string
-  for (
-    let charCode = "A".charCodeAt(0);
-    charCode <= "Z".charCodeAt(0);
-    charCode++
-  ) {
-    const letter = String.fromCharCode(charCode);
-    if (letter !== "J" && !hash[letter]) {
-      uniqueLetters += letter;
-    }
-  }
+	if (!hash["J"]) {
+		uniqueLetters += "J";
+	}
 
-  if (!hash["J"]) {
-    uniqueLetters += "J";
-  }
-
-  modifiedCipherText += uniqueLetters;
-
-  return (
-    <div>
-      {matrix5x5.map((row, i) => (
-        <div key={i} className={`${styles.row} ${i}`}>
-          {row.map((_, j) => (
-            <div
-              key={j}
-              className={`box ${styles.box}`}
-              id={`${i}${j}`}
-              style={{
-                color: j + 5 * i < ogCipherLength ? "green" : "black",
-                fontWeight: j + 5 * i < ogCipherLength ? "bold" : "",
-                animation:
-                  i * 5 + j < ogCipherLength ? "pulse 1s infinite" : ""
-              }}
-            >
-              <p>
-                {modifiedCipherText[(i * 5 + j) % modifiedCipherText.length] ===
-                "I"
-                  ? "I/J"
-                  : modifiedCipherText[(i * 5 + j) % modifiedCipherText.length]}
-              </p>
-            </div>
-          ))}
-        </div>
-      ))}
-    </div>
-  );
+	modifiedCipherText += uniqueLetters;
 
+	return (
+		<div>
+			{matrix5x5.map((row, i) => (
+				<div key={i} className={`${styles.row} ${i}`}>
+					{row.map((_, j) => (
+						<div
+							key={j}
+							className={`box ${styles.box}`}
+							id={`${i}${j}`}
+							style={{
+								color: j + 5 * i < ogCipherLength ? "white" : "black",
+								fontWeight: j + 5 * i < ogCipherLength ? "bold" : "",
+								animation:
+									i * 5 + j < ogCipherLength ? "pulse 1s infinite" : "",
+							}}
+						>
+							<p>
+								{modifiedCipherText[(i * 5 + j) % modifiedCipherText.length] ===
+								"I"
+									? "I/J"
+									: modifiedCipherText[(i * 5 + j) % modifiedCipherText.length]}
+							</p>
+						</div>
+					))}
+				</div>
+			))}
+		</div>
+	);
 };
 
 export default FiveFiveStatic;
diff --git a/fairplay/src/components/FiveFiveStatic/FiveFiveStatic.module.css b/fairplay/src/components/FiveFiveStatic/FiveFiveStatic.module.css
index 53f8028..cf0bc28 100644
--- a/fairplay/src/components/FiveFiveStatic/FiveFiveStatic.module.css
+++ b/fairplay/src/components/FiveFiveStatic/FiveFiveStatic.module.css
@@ -16,43 +16,42 @@
 	justify-content: center;
 	align-items: center;
 
-	font-size: var(--size2);
-  }
-  
-  .box:hover {
+	font-size: 30px;
+}
+
+.box:hover {
+
 	scale: 1.1;
 	transition: ease 0.3s;
-  }
-  
-  /* Add styles for animate__pulse class */
-  .animate__pulse {
+}
+
+/* Add styles for animate__pulse class */
+.animate__pulse {
 	animation: anpulse 1s infinite; /* Adjust animation duration and other properties as needed */
-  }
-  
-  .row {
+}
+
+.row {
 	display: flex;
 	flex-direction: row;
 	align-items: center;
 	justify-content: center;
-  }
-  
-  .x {
+}
+
+.x {
 	background-color: yellow; /* Change background color to yellow */
 	font-weight: bold; /* Make text bold */
 	/* Add any other styling you want */
 	animation: pulse 1s ease 0.3s 3 linear infinite;
-  }
-  
-  @keyframes pulse {
+}
+
+@keyframes pulse {
 	0% {
-	  transform: scale(1);
+		transform: scale(1);
 	}
 	50% {
-	  transform: scale(1.1);
+		transform: scale(1.1);
 	}
 	100% {
-	  transform: scale(1);
+		transform: scale(1);
 	}
-  }
-  
-
+}