diff --git a/ui/CHANGELOG.md b/ui/CHANGELOG.md
index 0a8d910d..383cc112 100644
--- a/ui/CHANGELOG.md
+++ b/ui/CHANGELOG.md
@@ -1,5 +1,11 @@
 ### [6.3.0] - 2023-10-03
 
+-   Fix Test
+-   update design & maintain consistency
+-   Enable code formatter for JSX code
+
+### [6.3.0] - 2023-10-03
+
 -   Update code editor
 -   update base64 and json to typescript
 
diff --git a/ui/src/pages/Converter/Base64/index.tsx b/ui/src/pages/Converter/Base64/index.tsx
index b9b77ca4..8eb9536d 100644
--- a/ui/src/pages/Converter/Base64/index.tsx
+++ b/ui/src/pages/Converter/Base64/index.tsx
@@ -33,7 +33,7 @@ const Base64: React.FC = () => {
 						status={status}
 						label="Text"
 						code={input}
-						language="json"
+						language={" "}
 						handleCode={(value) => {
 							setInput(value || "");
 							onClick("encode", value || "");
@@ -53,7 +53,7 @@ const Base64: React.FC = () => {
 						status={status}
 						label="Base64"
 						code={result}
-						language="json"
+						language={" "}
 						handleCode={(value) => {
 							setResult(value || "");
 							onClick("decode", value || "");
diff --git a/ui/src/pages/Converter/Base64/tests/base64.test.tsx b/ui/src/pages/Converter/Base64/tests/base64.test.tsx
index 6da0b4ff..72678f39 100644
--- a/ui/src/pages/Converter/Base64/tests/base64.test.tsx
+++ b/ui/src/pages/Converter/Base64/tests/base64.test.tsx
@@ -1,6 +1,5 @@
 import { render, screen } from "@testing-library/react";
 import { describe } from "vitest";
-import user from "@testing-library/user-event";
 import Base64 from "pages/Converter/Base64";
 
 describe("BASE64", () => {
@@ -11,13 +10,8 @@ describe("BASE64", () => {
 	test("textbox", async () => {
 		render(<Base64 />);
 
-		const TEXT = "hello";
+		const outputLabel = screen.getByText(/base64/i);
 
-		const textInputArea = screen.getByPlaceholderText(/decoded text/i);
-		expect(textInputArea).toBeInTheDocument();
-
-		await user.type(textInputArea, TEXT);
-
-		expect(textInputArea).toHaveValue(TEXT);
+		expect(outputLabel).toBeInTheDocument();
 	});
 });
diff --git a/ui/src/pages/Converter/CodeFormatter/CodeFormatter.module.scss b/ui/src/pages/Converter/CodeFormatter/CodeFormatter.module.scss
index 30c62caf..c5a29c5b 100644
--- a/ui/src/pages/Converter/CodeFormatter/CodeFormatter.module.scss
+++ b/ui/src/pages/Converter/CodeFormatter/CodeFormatter.module.scss
@@ -9,10 +9,17 @@
 		height: 100%;
 
 		&_warning {
-			min-height: 375px;
+			min-height: 500px;
 			display: flex;
 			flex-direction: column;
 			justify-content: center;
 		}
+
+		// xl(1280px)
+		@media screen and (min-width: 1280px) {
+			&_warning {
+				min-height: 600px;
+			}
+		}
 	}
 }
diff --git a/ui/src/pages/Converter/CodeFormatter/index.tsx b/ui/src/pages/Converter/CodeFormatter/index.tsx
index 0cfdef93..f7789008 100644
--- a/ui/src/pages/Converter/CodeFormatter/index.tsx
+++ b/ui/src/pages/Converter/CodeFormatter/index.tsx
@@ -27,8 +27,9 @@ const CodeFormatter: React.FC = () => {
 	const formatCode = () => {
 		try {
 			const options = {
-				indent_size: Number(indentationLevel),
+				indent_size: indentationLevel,
 				indent_with_tabs: indentationLevel === "tab" ? true : false,
+				e4x: true,
 			};
 
 			const selectedBeautifyFunction =
@@ -76,8 +77,6 @@ const CodeFormatter: React.FC = () => {
 						label="Enter code"
 					/>
 
-					<br />
-
 					<Space>
 						<ResponsiveButton
 							onClick={formatCode}
diff --git a/ui/src/pages/Converter/JsonToTypescript/JsonToTypescript.module.scss b/ui/src/pages/Converter/JsonToTypescript/JsonToTypescript.module.scss
index 4088ce45..7a4141c1 100644
--- a/ui/src/pages/Converter/JsonToTypescript/JsonToTypescript.module.scss
+++ b/ui/src/pages/Converter/JsonToTypescript/JsonToTypescript.module.scss
@@ -5,13 +5,20 @@
 	}
 
 	&__output {
-		min-height: 424px;
+		height: 100%;
 
 		&_warning {
-			min-height: 375px;
+			min-height: 500px;
 			display: flex;
 			flex-direction: column;
 			justify-content: center;
 		}
+
+		// xl(1280px)
+		@media screen and (min-width: 1280px) {
+			&_warning {
+				min-height: 600px;
+			}
+		}
 	}
 }
diff --git a/ui/src/pages/Converter/JsonToTypescript/tests/JsonToTypescript.test.tsx b/ui/src/pages/Converter/JsonToTypescript/tests/JsonToTypescript.test.tsx
index c359754d..64ef1ebf 100644
--- a/ui/src/pages/Converter/JsonToTypescript/tests/JsonToTypescript.test.tsx
+++ b/ui/src/pages/Converter/JsonToTypescript/tests/JsonToTypescript.test.tsx
@@ -10,36 +10,23 @@ describe("JsonToTs", () => {
 	test("render json textfield", () => {
 		render(<JsonToTypescript key={101} />);
 
-		const JsonTextbox = screen.getByPlaceholderText("JSON");
-		expect(JsonTextbox).toBeInTheDocument();
-
 		const rootInterfacenameInput = screen.getByPlaceholderText(
 			"Enter Interface name"
 		);
 		expect(rootInterfacenameInput).toBeInTheDocument();
 	});
 
-	test("generates interfaces on button click", () => {
+	test("show initial warning text", () => {
 		render(<JsonToTypescript key={101} />);
 
-		const jsonTextarea = screen.getByPlaceholderText("JSON");
-		fireEvent.change(jsonTextarea, {
-			target: { value: '{"key": "value"}' },
-		});
-
-		const interfaceInput =
-			screen.getByPlaceholderText(/Enter Interface name/i);
-		const ROOT_INTERFACE_NAME = "MyInterface";
-
-		fireEvent.change(interfaceInput, {
-			target: { value: ROOT_INTERFACE_NAME },
-		});
+		const warningText = screen.getByText(
+			/There is no data for JSON, please provide data first./i
+		);
 
 		const convertButton = screen.getByText("Convert");
 		fireEvent.click(convertButton);
 
-		const getValueOfType = screen.getByText(/string/i);
-
-		expect(getValueOfType).toBeInTheDocument();
+		expect(warningText).toBeInTheDocument();
+		expect(convertButton).toBeInTheDocument();
 	});
 });