diff --git a/src/App.tsx b/src/App.tsx
index e463efe9..b8b70054 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -19,10 +19,8 @@ import "./App.css";
 import AppFooter from "./components/App/AppFooter";
 import AppHeader from "./components/App/AppHeader";
 import { Container, Section, Bar } from "@column-resizer/react";
-import { RefreshCw } from "react-feather";
 import { decompressSharedTd } from "./share";
 import { editor } from "monaco-editor";
-import BaseButton from "./components/TDViewer/base/BaseButton";
 import ErrorDialog from "./components/Dialogs/ErrorDialog";
 
 const GlobalStateWrapper = () => {
@@ -46,7 +44,8 @@ const App: React.FC = () => {
   const context = useContext(ediTDorContext);
 
   const editorRef = useRef<editor.IStandaloneCodeEditor | null>(null);
-  const [doShowJSON, setDoShowJSON] = useState(false);
+  const [doShowJSON, setDoShowJSON] = useState(true);
+  const [containerKey, setContainerKey] = useState(0);
   const [customBreakpointsState, setCustomBreakpointsState] = useState(0);
   const tdViewerRef = useRef<HTMLDivElement>(null);
 
@@ -76,6 +75,7 @@ const App: React.FC = () => {
 
   const handleToggleJSON = () => {
     setDoShowJSON((prev) => !prev);
+    setContainerKey((prev) => prev + 1);
   };
 
   useEffect(() => {
@@ -165,11 +165,19 @@ const App: React.FC = () => {
 
   return (
     <main className="flex max-h-screen w-screen flex-col">
-      <AppHeader></AppHeader>
+      <AppHeader onToggleJSON={handleToggleJSON} isJSONVisible={doShowJSON} />
 
       <div className="">
-        <Container className="height-adjust flex flex-col md:flex-row">
-          <Section minSize={550} className="w-full min-w-16 md:w-7/12">
+        <Container
+          key={containerKey}
+          className="height-adjust flex flex-col md:flex-row"
+        >
+          <Section
+            minSize={550}
+            className={`w-full min-w-16 ${
+              doShowJSON ? "md:w-7/12" : "md:w-full"
+            }`}
+          >
             <div ref={tdViewerRef} className="h-full w-full">
               <TDViewer
                 onUndo={handleUndo}
@@ -179,23 +187,24 @@ const App: React.FC = () => {
             </div>
           </Section>
 
-          <Bar
-            size={7.5}
-            className="cursor-col-resize bg-gray-300 hover:bg-blue-500"
-          />
-
-          <Section className="w-full md:w-5/12">
-            <JsonEditor editorRef={editorRef} />
-          </Section>
+          {doShowJSON && (
+            <>
+              <Bar
+                size={doShowJSON ? 7.5 : 0}
+                className={`cursor-col-resize bg-gray-300 hover:bg-blue-500 ${
+                  doShowJSON ? "" : "hidden"
+                }`}
+              />
 
-          <BaseButton
-            type="button"
-            className="fixed bottom-12 right-2 z-10 rounded-full bg-blue-500 p-4"
-            onClick={handleToggleJSON}
-            variant="empty"
-          >
-            <RefreshCw color="white" />
-          </BaseButton>
+              <Section
+                className={`w-full ${
+                  doShowJSON ? "md:w-5/12" : "md:w-0"
+                } overflow-hidden`}
+              >
+                {doShowJSON && <JsonEditor editorRef={editorRef} />}
+              </Section>
+            </>
+          )}
         </Container>
       </div>
       <div className="fixed bottom-0 w-screen">
diff --git a/src/components/App/AppHeader.tsx b/src/components/App/AppHeader.tsx
index 2974e581..4a99103c 100644
--- a/src/components/App/AppHeader.tsx
+++ b/src/components/App/AppHeader.tsx
@@ -26,6 +26,8 @@ import {
   Share,
   Link,
   Send,
+  Eye,
+  EyeOff,
 } from "react-feather";
 import editdorLogo from "../../assets/editdor.png";
 import ediTDorContext from "../../context/ediTDorContext";
@@ -49,7 +51,10 @@ const INVALID_TYPE_MESSAGE =
 const VALIDATION_FAILED_MESSAGE =
   "The Thing Model did not pass the JSON schema validation Please make sure the Thing Model is valid according to the JSON schema before contributing it to the catalog.";
 
-const AppHeader: React.FC = () => {
+const AppHeader: React.FC<{
+  onToggleJSON: () => void;
+  isJSONVisible: boolean;
+}> = ({ onToggleJSON, isJSONVisible }) => {
   const context = useContext(ediTDorContext);
   const td: ThingDescription = context.parsedTD;
   /** States*/
@@ -335,6 +340,12 @@ const AppHeader: React.FC = () => {
             <Settings />
             <div className="text-xs">Settings</div>
           </Button>
+          <Button onClick={onToggleJSON}>
+            {isJSONVisible ? <EyeOff /> : <Eye />}
+            <div className="text-xs">
+              {isJSONVisible ? "Hide Code" : "Show Code"}
+            </div>
+          </Button>
         </div>
       </header>
       <SendTDDialog ref={sendTdDialog} currentTdId={currentTdId} />