diff --git a/package-lock.json b/package-lock.json
index 79305f7d..c41e6378 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -36,6 +36,7 @@
         "react-dropdown": "^1.11.0",
         "react-icons": "^5.5.0",
         "react-markdown": "^9.0.1",
+        "react-resizable-panels": "^3.0.3",
         "react-router-dom": "^6.24.1",
         "react-shepherd": "^6.1.1",
         "react-spring": "^9.7.4",
@@ -19974,6 +19975,16 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-resizable-panels": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/react-resizable-panels/-/react-resizable-panels-3.0.3.tgz",
+      "integrity": "sha512-7HA8THVBHTzhDK4ON0tvlGXyMAJN1zBeRpuyyremSikgYh2ku6ltD7tsGQOcXx4NKPrZtYCm/5CBr+dkruTGQw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc",
+        "react-dom": "^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"
+      }
+    },
     "node_modules/react-router": {
       "version": "6.24.1",
       "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.24.1.tgz",
diff --git a/package.json b/package.json
index 246ba7c2..79f588b8 100644
--- a/package.json
+++ b/package.json
@@ -44,6 +44,7 @@
     "react-dropdown": "^1.11.0",
     "react-icons": "^5.5.0",
     "react-markdown": "^9.0.1",
+    "react-resizable-panels": "^3.0.3",
     "react-router-dom": "^6.24.1",
     "react-shepherd": "^6.1.1",
     "react-spring": "^9.7.4",
diff --git a/src/App.tsx b/src/App.tsx
index af40254f..d2cc0868 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,22 +1,15 @@
 import { useEffect, useState } from "react";
-import { App as AntdApp, Layout, Row, Col, Collapse, Spin } from "antd";
+import { App as AntdApp, Layout, Spin } from "antd";
 import { LoadingOutlined } from "@ant-design/icons";
 import { Routes, Route, useSearchParams, useNavigate } from "react-router-dom";
 import Navbar from "./components/Navbar";
-import Footer from "./components/Footer";
 import tour from "./components/Tour";
-import AgreementData from "./editors/editorsContainer/AgreementData";
 import LearnNow from "./pages/LearnNow";
-import AgreementHtml from "./AgreementHtml";
-import Errors from "./utils/helpers/Errors";
-import TemplateMarkdown from "./editors/editorsContainer/TemplateMarkdown";
-import TemplateModel from "./editors/editorsContainer/TemplateModel";
 import useAppStore from "./store/store";
-import SampleDropdown from "./components/SampleDropdown";
-import UseShare from "./components/UseShare";
 import LearnContent from "./components/Content";
-import ResizableContainer from "./components/ResizableContainer";
-import { AIChatPanel } from "./components/AIChatPanel";
+import MainContainer from "./pages/MainContainer";
+import PlaygroundSidebar from "./components/PlaygroundSidebar";
+import "./styles/App.css";
 import AIConfigPopup from "./components/AIConfigPopup";
 import { loadConfigFromLocalStorage } from "./ai-assistant/chatRelay";
 
@@ -26,35 +19,22 @@ const App = () => {
   const navigate = useNavigate();
   const init = useAppStore((state) => state.init);
   const loadFromLink = useAppStore((state) => state.loadFromLink);
-  const { isAIChatOpen, setAIChatOpen, isAIConfigOpen, setAIConfigOpen } = useAppStore((state) => ({
-      isAIChatOpen: state.isAIChatOpen,
-      setAIChatOpen: state.setAIChatOpen,
+  const { isAIConfigOpen, setAIConfigOpen } =
+    useAppStore((state) => ({
       isAIConfigOpen: state.isAIConfigOpen,
-      setAIConfigOpen: state.setAIConfigOpen
-    }
-  ));
+      setAIConfigOpen: state.setAIConfigOpen,
+    }));
   const backgroundColor = useAppStore((state) => state.backgroundColor);
   const textColor = useAppStore((state) => state.textColor);
-  const [activePanel, setActivePanel] = useState<string | string[]>();
   const [loading, setLoading] = useState(true);
   const [searchParams] = useSearchParams();
 
-  const scrollToFooter = () => {
-    const exploreContent = document.getElementById("footer");
-    if (exploreContent) {
-      exploreContent.scrollIntoView({ behavior: "smooth" });
-    }
-  };
 
   const handleConfigSave = () => {
     loadConfigFromLocalStorage();
     setAIConfigOpen(false);
   };
 
-  const onChange = (key: string | string[]) => {
-    setActivePanel(key);
-  };
-
   useEffect(() => {
     const initializeApp = async () => {
       try {
@@ -74,7 +54,7 @@ const App = () => {
         setLoading(false);
       }
     };
-    initializeApp();
+    void initializeApp();
   }, [init, loadFromLink, searchParams, navigate]);
 
   useEffect(() => {
@@ -109,167 +89,67 @@ const App = () => {
 
     const showTour = searchParams.get("showTour") === "true";
     if (showTour || !localStorage.getItem("hasVisited")) {
-      startTour();
+      void startTour();
     }
   }, [searchParams]);
 
-  const panels = [
-    {
-      key: "templateMark",
-      label: "TemplateMark",
-      children: <TemplateMarkdown />,
-    },
-    {
-      key: "model",
-      label: "Concerto Model",
-      children: <TemplateModel />,
-    },
-    {
-      key: "data",
-      label: "Preview Data",
-      children: <AgreementData />,
-    },
-  ];
+
 
   return (
     <AntdApp>
-      <Layout style={{ minHeight: "100vh" }}>
-        <Navbar scrollToFooter={scrollToFooter} />
-        <Content>
-          {loading ? (
-            <div
-              style={{
-                flex: 1,
-                display: "flex",
-                justifyContent: "center",
-                background: backgroundColor,
-                alignItems: "center",
-                minHeight: "calc(100vh - 64px - 70px)", // Adjust for Navbar and Footer height
-              }}
-            >
-              <Spinner />
-            </div>
-          ) : (
-            <Routes>
-              <Route
-                path="/"
-                element={
-                  <div
-                    style={{
-                      padding: 24,
-                      paddingBottom: 24,
-                      minHeight: 360,
-                      background: backgroundColor,
-                    }}
-                  >
-                    <Row>
-                      <Col xs={24} sm={8}>
-                        <Row
-                          style={{
-                            marginLeft: "25px",
-                            display: "flex",
-                            flexDirection: "row",
-                            gap: "10px",
-                          }}
-                        >
-                          <SampleDropdown setLoading={setLoading} />
-                          <UseShare />
-                          <button id="ai-assistant" onClick={() => setAIChatOpen(!isAIChatOpen)} className="flex cursor-pointer items-center justify-center px-4 py-1.5 h-8 text-sm bg-white border border-solid border-gray-300 rounded-md transition-all duration-400 ease-in-out hover:border-[#4096ff] hover:text-[#4096ff]">
-                            <svg
-                              xmlns="http://www.w3.org/2000/svg"
-                              viewBox="0 0 45 20"
-                              fill="none"
-                              className="size-8"
-                            >
-                              <path
-                                strokeLinecap="round"
-                                strokeLinejoin="round"
-                                strokeWidth={1.5}
-                                stroke="currentColor"
-                                d="M12 13.25c4.97 0 9-3.694 9-8.25s-4.03-8.25-9-8.25S3 0.444 3 5c0 2.104.859 4.023 2.273 5.48.432.447.74 1.04.586 1.641a4.483 4.483 0 01-.923 1.785A5.969 5.969 0 006 14c1.282 0 2.47-.402 3.445-1.087.81.22 1.668.337 2.555.337z"
-                                transform="translate(0, 3)"
-                              />
-                              <defs>
-                                <linearGradient id="ai-gradient" x1="0%" y1="0%" x2="100%" y2="0%">
-                                  <stop offset="0%" stopColor="#a78bfa" />
-                                  <stop offset="50%" stopColor="#ec4899" />
-                                  <stop offset="100%" stopColor="#ef4444" />
-                                </linearGradient>
-                              </defs>
-                              <text
-                                x="32"
-                                y="6"
-                                fontSize="16"
-                                fontWeight="bold"
-                                fill="url(#ai-gradient)"
-                                textAnchor="middle"
-                              >
-                                AI
-                              </text>
-                            </svg>
-                            <span>Assistant</span>
-                          </button>
-                        </Row>
-                      </Col>
-                      <Col span={18}>
-                        <Errors />
-                      </Col>
-                    </Row>
-                    <div
-                      style={{
-                        padding: 24,
-                        minHeight: 360,
-                        background: backgroundColor,
-                      }}
-                    >
-                      <ResizableContainer
-                        leftPane={
-                          <Collapse
-                            defaultActiveKey={activePanel}
-                            onChange={onChange}
-                            items={panels}
-                            style={{ marginBottom: "24px" }}
-                          />
-                        }
-                        rightPane={<AgreementHtml loading={loading} isModal={false} />}
-                        aiChatPane={isAIChatOpen ? <AIChatPanel /> : null}
-                        initialLeftWidth={66}
-                        minLeftWidth={30}
-                        minRightWidth={30}
-                      />
-                    </div>
-                  </div>
-                }
-              />
-              <Route path="/learn" element={<LearnNow />}>
-                <Route path="intro" element={<LearnContent file="intro.md" />} />
-                <Route path="module1" element={<LearnContent file="module1.md" />} />
-                <Route path="module2" element={<LearnContent file="module2.md" />} />
-                <Route path="module3" element={<LearnContent file="module3.md" />} />
-              </Route>
-            </Routes>
-          )}
-        </Content>
-        <AIConfigPopup
-            isOpen={isAIConfigOpen}
-            onClose={() => setAIConfigOpen(false)}
-            onSave={handleConfigSave}
-        />
-        <Footer />
+      <Layout style={{ height: "100vh" }}>
+        <Navbar />
+        <Layout className="app-layout">
+          <Routes>
+            <Route
+              path="/"
+              element={
+                <>
+                  <PlaygroundSidebar />
+                  <Content>
+                    {loading ? (
+                      <div
+                        className="app-content-loading"
+                        style={{
+                          background: backgroundColor,
+                        }}
+                      >
+                        <Spinner />
+                      </div>
+                    ) : (
+                      <div
+                        className="app-main-content"
+                        style={{
+                          background: backgroundColor,
+                        }}
+                      >
+                        <MainContainer />
+                      </div>
+                    )}
+                  </Content>
+                  <AIConfigPopup
+                    isOpen={isAIConfigOpen}
+                    onClose={() => setAIConfigOpen(false)}
+                    onSave={handleConfigSave}
+                  />
+                </>
+              }
+            />
+            <Route path="/learn" element={<LearnNow />}>
+              <Route path="intro" element={<LearnContent file="intro.md" />} />
+              <Route path="module1" element={<LearnContent file="module1.md" />} />
+              <Route path="module2" element={<LearnContent file="module2.md" />} />
+              <Route path="module3" element={<LearnContent file="module3.md" />} />
+            </Route>
+          </Routes>
+        </Layout>
       </Layout>
     </AntdApp>
   );
 };
 
 const Spinner = () => (
-  <div
-    style={{
-      flex: 1,
-      display: "flex",
-      justifyContent: "center",
-      alignItems: "center",
-    }}
-  >
+  <div className="app-spinner-container">
     <Spin
       indicator={<LoadingOutlined style={{ fontSize: 42, color: "#19c6c7" }} spin />}
     />
diff --git a/src/components/AIChatPanel.tsx b/src/components/AIChatPanel.tsx
index a6dc243e..b8f45a96 100644
--- a/src/components/AIChatPanel.tsx
+++ b/src/components/AIChatPanel.tsx
@@ -15,7 +15,7 @@ export const AIChatPanel = () => {
     editorAgreementData: state.editorAgreementData,
   }));
   
-  const { chatState, resetChat, aiConfig, setAIConfig, setAIConfigOpen, setAIChatOpen } = useAppStore.getState()
+  const { chatState, resetChat, aiConfig, setAIConfig, setAIConfigOpen, setAIChatOpen, textColor } = useAppStore.getState()
   
   const latestMessageRef = useRef<HTMLDivElement>(null);
   
@@ -37,7 +37,7 @@ export const AIChatPanel = () => {
       return;
     }
     
-    let prompt = userInput;
+    const prompt = userInput;
     
     setUserInput("");
     setIsDropdownOpen(false);
@@ -101,7 +101,7 @@ export const AIChatPanel = () => {
         return;
       }
       e.preventDefault();
-      handleSendMessage();
+      void handleSendMessage();
     }
   };
 
@@ -180,9 +180,9 @@ export const AIChatPanel = () => {
   }, [chatState.messages, chatState.isLoading]);
 
   return (
-    <div className="twp pl-4 pr-4 pt-3 flex flex-col border rounded-md h-[calc(100vh-150px)]">
+    <div className="twp pl-4 pr-4 pt-3 flex flex-col border rounded-md h-[calc(100vh-150px)] h-full">
       <div className="flex justify-between items-center h-4">
-        <h2 className="text-lg font-bold">AI Assistant</h2>
+        <h2 className="text-lg font-bold" style={{ color: textColor }}>AI Assistant</h2>
         <div className="flex items-center gap-2">
           <button
             onClick={() => setAIConfigOpen(true)}
@@ -277,7 +277,7 @@ export const AIChatPanel = () => {
                     }
                   >
                     <div className={`${message.role === 'assistant' ? 'bg-blue-100' : 'bg-gray-100'} p-3 rounded-lg`}>
-                      <p className="text-xs font-semibold text-gray-600 mb-1">
+                      <p className="text-xs font-semibold mb-1" style={{ color: textColor }}>
                           {message.role === 'assistant' ? 'Assistant' : 'You'}
                       </p>
                       {message.content && renderMessageContent(
@@ -332,7 +332,7 @@ export const AIChatPanel = () => {
             
             {/* Context selection row */}
             <div className="flex items-center justify-start px-2 gap-2">
-              <span className="text-xs text-gray-600 mr-1">Context:</span>
+              <span className="text-xs text-gray-600 mr-1" style={{color: textColor}}>Context:</span>
               {/* TemplateMark Button */}
               <div
                 onClick={() => handleTemplateMarkToggle(!includeTemplateMarkContent)}
@@ -524,7 +524,7 @@ export const AIChatPanel = () => {
                 </button>
               ) : (
                 <button 
-                  onClick={handleSendMessage}
+                  onClick={() => void handleSendMessage()}
                   disabled={!userInput.trim()}
                   className="bg-blue-500 text-white px-4 py-2 rounded-lg hover:bg-blue-600 flex-shrink-0 disabled:bg-gray-400 disabled:cursor-not-allowed"
               >
diff --git a/src/components/CodeSelectionMenu.tsx b/src/components/CodeSelectionMenu.tsx
index 640adb89..3c8ab953 100644
--- a/src/components/CodeSelectionMenu.tsx
+++ b/src/components/CodeSelectionMenu.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useRef } from 'react';
+import React, { useState, useEffect, useRef, useCallback } from 'react';
 import { sendMessage } from '../ai-assistant/chatRelay';
 import { CodeSelectionMenuProps } from '../types/components/AIAssistant.types';
 import useAppStore from '../store/store';
@@ -18,6 +18,16 @@ const CodeSelectionMenu: React.FC<CodeSelectionMenuProps> = ({
   const { aiConfig, setAIConfigOpen, setAIChatOpen } = useAppStore();
   const [abortController, setAbortController] = useState<AbortController | null>(null);
 
+  const handleClose = useCallback(() => {
+    if (abortController) {
+      abortController.abort();
+      setAbortController(null);
+    }
+    setIsExplaining(false);
+    setShowExplanation(false);
+    onClose();
+  }, [abortController, onClose]);
+
   useEffect(() => {
     const handleClickOutside = (event: MouseEvent) => {
       if (
@@ -31,7 +41,7 @@ const CodeSelectionMenu: React.FC<CodeSelectionMenuProps> = ({
 
     document.addEventListener('mousedown', handleClickOutside);
     return () => document.removeEventListener('mousedown', handleClickOutside);
-  }, []);
+  }, [handleClose]);
 
   const editorsContent = useAppStore((state) => ({
       editorTemplateMark: state.editorValue,
@@ -114,25 +124,36 @@ const CodeSelectionMenu: React.FC<CodeSelectionMenuProps> = ({
     );
   };
 
-  const handleClose = () => {
-    if (abortController) {
-      abortController.abort();
-      setAbortController(null);
-    }
-    setIsExplaining(false);
-    setShowExplanation(false);
-    onClose();
+  const popupPosition = {
+    left: Math.max(300, Math.min(position.x, window.innerWidth - 350)),
+    top: isExplaining ? position.y - 20 : Math.max(10, Math.min(position.y - 20, window.innerHeight - 300)),
   };
+  
+  useEffect(() => {
+    if (explanationRef.current && showExplanation) {
+      const popup = explanationRef.current;
+      const rect = popup.getBoundingClientRect();
+      
+      if (rect.right > window.innerWidth) {
+        popup.style.left = `${window.innerWidth - rect.width - 10}px`;
+      }
+      
+      if (rect.bottom > window.innerHeight) {
+        popup.style.top = `${window.innerHeight - rect.height - 10}px`;
+      }
+    }
+  }, [showExplanation, position]);
 
   if (showExplanation) {
     return (
       <div
         ref={explanationRef}
-        className="twp absolute bg-white border border-gray-300 rounded-lg shadow-lg p-4 max-w-md z-50"
+        className="twp fixed bg-white border border-gray-300 rounded-lg shadow-lg p-4 max-w-md z-50"
         style={{
-          left: position.x,
-          top: position.y - 20,
-          transform: 'translateY(-50%)',
+          left: popupPosition.left,
+          top: popupPosition.top,
+          maxHeight: '80vh',
+          maxWidth: '80vw',
         }}
       >
         <button
@@ -178,7 +199,7 @@ const CodeSelectionMenu: React.FC<CodeSelectionMenuProps> = ({
                   },
                   code: ({ children, className }) => {
                     return (
-                      <code className={`bg-gray-200 p-1 rounded-md before:content-[''] after:content-[''] ${className}`}>
+                      <code className={`bg-gray-200 p-1 rounded-md before:content-[''] after:content-[''] ${className || ''}`}>
                         {children}
                       </code>
                     );
@@ -196,15 +217,15 @@ const CodeSelectionMenu: React.FC<CodeSelectionMenuProps> = ({
   return (
     <div
       ref={menuRef}
-      className="twp absolute bg-white border border-gray-300 rounded-lg shadow-lg py-1 z-50 flex"
+      className="twp fixed bg-white border border-gray-300 rounded-lg shadow-lg py-1 z-50 flex"
       style={{ 
-        left: 225, 
-        top: position.y,
+        left: Math.max(10, Math.min(225, window.innerWidth - 150)), 
+        top: Math.max(10, Math.min(position.y, window.innerHeight - 50)),
         minWidth: '120px'
       }}
     >
       <button
-        onClick={handleExplain}
+        onClick={() => void handleExplain()}
         className="flex-1 px-1 py-1 text-left text-sm text-gray-700 hover:bg-gray-100 flex items-center justify-center border-r border-gray-200"
       >
         <svg className="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -213,7 +234,7 @@ const CodeSelectionMenu: React.FC<CodeSelectionMenuProps> = ({
         Explain
       </button>
       <button
-        onClick={handleChat}
+        onClick={() => void handleChat()}
         className="flex-1 px-1 py-1 text-left text-sm text-gray-700 hover:bg-gray-100 flex items-center justify-center"
       >
         <svg className="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -238,10 +259,26 @@ export const useCodeSelection = (editorType: 'markdown' | 'concerto' | 'json') =
       const selectedText = editor.getModel()?.getValueInRange(selection).trim();
       if (selectedText && selectedText.length > 0) {
         const position = editor.getScrolledVisiblePosition(selection.getStartPosition());
+        const editorContainer = editor.getDomNode().closest('.editorwrapper');
+        const editorRect = editorContainer?.getBoundingClientRect();
+        
+        let x, y;
+        
+        if (editorRect) {
+          x = Math.max(editorRect.left + 20, Math.min(position.left, editorRect.right - 150));
+          y = Math.max(editorRect.top + 20, Math.min(position.top, editorRect.bottom - 50));
+          
+          x = Math.max(10, Math.min(x, window.innerWidth - 150));
+          y = Math.max(10, Math.min(y, window.innerHeight - 50));
+        } else {
+          x = Math.max(10, Math.min(position.left, window.innerWidth - 150));
+          y = Math.max(10, Math.min(position.top, window.innerHeight - 50));
+        }
+        
         setSelectedText(selectedText);
         setMenuPosition({
-          x: position.left,
-          y: position.top
+          x: x,
+          y: y
         });
         setShowMenu(true);
       }
@@ -272,4 +309,4 @@ export const useCodeSelection = (editorType: 'markdown' | 'concerto' | 'json') =
   };
 };
 
-export default CodeSelectionMenu;
\ No newline at end of file
+export default CodeSelectionMenu;
diff --git a/src/components/FullScreenModal.tsx b/src/components/FullScreenModal.tsx
index f1ee4d3c..1b2b03e2 100644
--- a/src/components/FullScreenModal.tsx
+++ b/src/components/FullScreenModal.tsx
@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from "react";
 import { Modal } from "antd";
 import AgreementHtml from "../AgreementHtml";
-import { FullscreenOutlined } from "@ant-design/icons";
+import { MdFullscreen } from "react-icons/md";
 import useAppStore from "../store/store";
 
 const FullScreenModal: React.FC = () => {
@@ -31,9 +31,10 @@ const FullScreenModal: React.FC = () => {
   }, [textColor, backgroundColor]);
 
   return (
-    <div style={{ textAlign: "right", display: "flex", alignItems: "center", justifyContent: "flex-end", color: textColor, }} className="preview-element">
-      <FullscreenOutlined
-        style={{ fontSize: "24px", cursor: "pointer", margin: "5px" }}
+    <>
+      <MdFullscreen
+        size={24}
+        style={{ cursor: "pointer" }}
         onClick={() => setOpen(true)}
       />
       <Modal
@@ -46,7 +47,7 @@ const FullScreenModal: React.FC = () => {
       >
         <AgreementHtml loading={false} isModal={true} />
       </Modal>
-    </div>
+    </>
   );
 };
 
diff --git a/src/components/Sidebar.tsx b/src/components/LearningPathwaySidebar.tsx
similarity index 92%
rename from src/components/Sidebar.tsx
rename to src/components/LearningPathwaySidebar.tsx
index 70122f2e..61ecc86e 100644
--- a/src/components/Sidebar.tsx
+++ b/src/components/LearningPathwaySidebar.tsx
@@ -16,7 +16,7 @@ import { BulbOutlined } from "@ant-design/icons";
 interface SidebarProps {
   steps: { title: string; link: string }[];
 }
-const Sidebar: React.FC<SidebarProps> = ({ steps }) => {
+const LearningPathwaySidebar: React.FC<SidebarProps> = ({ steps }) => {
   return (
     <SidebarContainer>
       <SidebarTitle>Learning Pathway</SidebarTitle>
@@ -50,4 +50,4 @@ const Sidebar: React.FC<SidebarProps> = ({ steps }) => {
   );
 };
 
-export default Sidebar;
\ No newline at end of file
+export default LearningPathwaySidebar;
\ No newline at end of file
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
index b5aeb4d9..fc6535fa 100644
--- a/src/components/Navbar.tsx
+++ b/src/components/Navbar.tsx
@@ -1,6 +1,5 @@
 import { useState } from "react";
-import { Menu, Dropdown, Button, Image, Grid } from "antd";
-import { useSpring } from "react-spring";
+import { useSpring, animated } from "react-spring";
 import { useLocation, Link } from "react-router-dom";
 import {
   GithubOutlined,
@@ -13,15 +12,157 @@ import {
 } from "@ant-design/icons";
 import ToggleDarkMode from "./ToggleDarkMode";
 
-const { useBreakpoint } = Grid;
 
-interface NavbarProps {
-  scrollToFooter: () => void;
+interface DropdownProps {
+  children: React.ReactNode;
+  overlay: React.ReactNode;
+  trigger: string[];
+  className?: string;
 }
 
-function Navbar({ scrollToFooter }: NavbarProps) {
+const Dropdown = ({ children, overlay, trigger, className = "" }: DropdownProps) => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const handleClick = () => {
+    if (trigger.includes("click")) {
+      setIsOpen(!isOpen);
+    }
+  };
+
+  const handleMouseEnter = () => {
+    if (trigger.includes("hover")) {
+      setIsOpen(true);
+    }
+  };
+
+  const handleMouseLeave = () => {
+    if (trigger.includes("hover")) {
+      setIsOpen(false);
+    }
+  };
+
+  return (
+    <div 
+      className={`relative ${className}`}
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
+    >
+      <div onClick={handleClick}>
+        {children}
+      </div>
+      {isOpen && (
+        <>
+          <div 
+            className="fixed inset-0 z-10" 
+            onClick={() => setIsOpen(false)}
+          />
+          <div className="absolute top-full left-0 z-20 mt-1 min-w-48 bg-white dark:bg-gray-800 rounded-md shadow-lg border border-gray-200 dark:border-gray-700">
+            {overlay}
+          </div>
+        </>
+      )}
+    </div>
+  );
+};
+
+const Menu = ({ children, className = "" }: { children: React.ReactNode; className?: string }) => (
+  <div className={`py-1 ${className}`}>
+    {children}
+  </div>
+);
+
+const MenuItem = ({ 
+  children, 
+  onClick, 
+  className = "" 
+}: { 
+  children: React.ReactNode; 
+  onClick?: () => void;
+  className?: string;
+}) => (
+  <div 
+    className={`px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 cursor-pointer flex items-center space-x-2 ${className}`}
+    onClick={onClick}
+  >
+    {children}
+  </div>
+);
+
+const MenuItemGroup = ({ 
+  title, 
+  children, 
+  className = "" 
+}: { 
+  title: string; 
+  children: React.ReactNode;
+  className?: string;
+}) => (
+  <div className={className}>
+    <div className="px-4 py-2 text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wide border-b border-gray-200 dark:border-gray-700">
+      {title}
+    </div>
+    {children}
+  </div>
+);
+
+const Button = ({ 
+  children, 
+  onClick, 
+  className = "" 
+}: { 
+  children: React.ReactNode; 
+  onClick?: () => void;
+  className?: string;
+}) => (
+  <button 
+    className={`flex items-center ${className}`}
+    onClick={onClick}
+  >
+    {children}
+  </button>
+);
+
+const Image = ({ 
+  src, 
+  alt, 
+  className = "" 
+}: { 
+  src: string; 
+  alt: string;
+  className?: string;
+}) => (
+  <img src={src} alt={alt} className={className} />
+);
+
+const useBreakpoint = () => {
+  const [screenSize, setScreenSize] = useState({
+    sm: false,
+    md: false,
+    lg: false,
+    xl: false,
+  });
+
+  useState(() => {
+    const checkSize = () => {
+      setScreenSize({
+        sm: window.innerWidth >= 640,
+        md: window.innerWidth >= 768,
+        lg: window.innerWidth >= 1024,
+        xl: window.innerWidth >= 1280,
+      });
+    };
+
+    checkSize();
+    window.addEventListener('resize', checkSize);
+    return () => window.removeEventListener('resize', checkSize);
+  });
+
+  return screenSize;
+};
+
+function Navbar() {
   const [hovered, setHovered] = useState<
-    null | "home" | "explore" | "help" | "github" | "join"
+    null | "home" | "help" | "github" | "join"
   >(null);
   const screens = useBreakpoint();
   const location = useLocation();
@@ -38,272 +179,206 @@ function Navbar({ scrollToFooter }: NavbarProps) {
 
   const mobileMenu = (
     <Menu>
-      <Menu.Item key="home">
-        <Link to="/">
-          Template Playground
+      <MenuItem>
+        <Link to="/" className="flex items-center space-x-2">
+          <span>Template Playground</span>
         </Link>
-      </Menu.Item>
-      <Menu.Item key="explore" onClick={scrollToFooter}>
-        Explore
-      </Menu.Item>
-      <Menu.Item key="about">
+      </MenuItem>
+      <MenuItem>
         <a
           href="https://github.com/accordproject/template-playground/blob/main/README.md"
           target="_blank"
           rel="noopener noreferrer"
+          className="flex items-center space-x-2"
         >
-          <QuestionOutlined /> About
+          <QuestionOutlined />
+          <span>About</span>
         </a>
-      </Menu.Item>
-      <Menu.Item key="community">
+      </MenuItem>
+      <MenuItem>
         <a
           href="https://discord.com/invite/Zm99SKhhtA"
           target="_blank"
           rel="noopener noreferrer"
+          className="flex items-center space-x-2"
         >
-          <UserOutlined /> Community
+          <UserOutlined />
+          <span>Community</span>
         </a>
-      </Menu.Item>
-      <Menu.Item key="issues">
+      </MenuItem>
+      <MenuItem>
         <a
           href="https://github.com/accordproject/template-playground/issues"
           target="_blank"
           rel="noopener noreferrer"
+          className="flex items-center space-x-2"
         >
-          <InfoOutlined /> Issues
+          <InfoOutlined />
+          <span>Issues</span>
         </a>
-      </Menu.Item>
-      <Menu.Item key="documentation">
+      </MenuItem>
+      <MenuItem>
         <a
           href="https://github.com/accordproject/template-engine/blob/main/README.md"
           target="_blank"
           rel="noopener noreferrer"
+          className="flex items-center space-x-2"
         >
-          <BookOutlined /> Documentation
+          <BookOutlined />
+          <span>Documentation</span>
         </a>
-      </Menu.Item>
+      </MenuItem>
     </Menu>
   );
 
   const helpMenu = (
     <Menu>
-      <Menu.ItemGroup key="info" title="Info">
-        <Menu.Item key="about">
+      <MenuItemGroup title="Info">
+        <MenuItem>
           <a
             href="https://github.com/accordproject/template-playground/blob/main/README.md"
             target="_blank"
             rel="noopener noreferrer"
+            className="flex items-center space-x-2"
           >
-            <QuestionOutlined /> About
+            <QuestionOutlined />
+            <span>About</span>
           </a>
-        </Menu.Item>
-        <Menu.Item key="community">
+        </MenuItem>
+        <MenuItem>
           <a
             href="https://discord.com/invite/Zm99SKhhtA"
             target="_blank"
             rel="noopener noreferrer"
+            className="flex items-center space-x-2"
           >
-            <UserOutlined /> Community
+            <UserOutlined />
+            <span>Community</span>
           </a>
-        </Menu.Item>
-        <Menu.Item key="issues">
+        </MenuItem>
+        <MenuItem>
           <a
             href="https://github.com/accordproject/template-playground/issues"
             target="_blank"
             rel="noopener noreferrer"
+            className="flex items-center space-x-2"
           >
-            <InfoOutlined /> Issues
+            <InfoOutlined />
+            <span>Issues</span>
           </a>
-        </Menu.Item>
-      </Menu.ItemGroup>
-      <Menu.ItemGroup title="Documentation">
-        <Menu.Item key="documentation">
+        </MenuItem>
+      </MenuItemGroup>
+      <MenuItemGroup title="Documentation">
+        <MenuItem>
           <a
             href="https://github.com/accordproject/template-engine/blob/main/README.md"
             target="_blank"
             rel="noopener noreferrer"
+            className="flex items-center space-x-2"
           >
-            <BookOutlined /> Documentation
+            <BookOutlined />
+            <span>Documentation</span>
           </a>
-        </Menu.Item>
-      </Menu.ItemGroup>
+        </MenuItem>
+      </MenuItemGroup>
     </Menu>
   );
 
-  const menuItemStyle = (key: string, isLast: boolean) => ({
-    display: "flex",
-    alignItems: "center",
-    padding: screens.md ? "0 20px" : "0",
-    backgroundColor:
-      hovered === key ? "rgba(255, 255, 255, 0.1)" : "transparent",
-    height: "65px",
-    borderRight:
-      screens.md && !isLast ? "1.5px solid rgba(255, 255, 255, 0.1)" : "none",
-  });
+  const menuItemClasses = (key: string, isLast: boolean) => {
+    const baseClasses = "flex items-center h-16";
+    const paddingClasses = screens.md ? "px-5" : "px-0";
+    const bgClasses = hovered === key ? "bg-white bg-opacity-10" : "bg-transparent";
+    const borderClasses = screens.md && !isLast ? "border-r border-white border-opacity-10" : "";
+    
+    return `${baseClasses} ${paddingClasses} ${bgClasses} ${borderClasses}`;
+  };
 
   const isLearnPage = location.pathname.startsWith("/learn");
 
   return (
-    <div
-      style={{
-        position: "sticky",
-        top: 0,
-        zIndex: 1000,
-        background: "#1b2540",
-        height: "65px",
-        lineHeight: "65px",
-        display: "flex",
-        alignItems: "center",
-        paddingLeft: screens.lg ? 40 : screens.md ? 10 : 10,
-        paddingRight: screens.lg ? 40 : screens.md ? 10 : 10,
-      }}
-    >
+    <div className={`sticky top-0 z-50 bg-[#1b2540] h-16 flex items-center ${
+      screens.lg ? "px-10" : screens.md ? "px-2.5" : "px-2.5"
+    }`}>
       <div
-        style={{
-          cursor: "pointer",
-          ...menuItemStyle("home", false),
-        }}
+        className={`cursor-pointer ${menuItemClasses("home", false)}`}
         onMouseEnter={() => setHovered("home")}
         onMouseLeave={() => setHovered(null)}
       >
         <Link
           to="/"
           rel="noopener noreferrer"
-          style={{ display: "flex", alignItems: "center" }}
+          className="flex items-center"
         >
           <Image
             src={screens.lg ? "/logo.png" : "/accord_logo.png"}
             alt="Template Playground"
-            preview={false}
-            style={{
-              paddingRight: screens.md ? "8px" : "2px",
-              height: "26px",
-              maxWidth: screens.md ? "184.17px" : "36.67px",
-            }}
+            className={`h-6.5 ${screens.lg ? "pr-2 max-w-[184.17px]" : "pr-0.5 max-w-[36.67px]"}`}
           />
-          <span style={{ color: "white", display: screens.lg ? "block" : "none" }}>Template Playground</span>
-
+          <span className={`text-white ${screens.lg ? "block" : "hidden"}`}>
+            Template Playground
+          </span>
         </Link>
       </div>
+      
       {screens.md ? (
         <>
           <div
-            style={{
-              ...menuItemStyle("explore", false),
-              cursor: "pointer",
-            }}
-            onClick={scrollToFooter}
-            onMouseEnter={() => setHovered("explore")}
-            onMouseLeave={() => setHovered(null)}
-          >
-            <span style={{ color: "white" }}>Explore</span>
-          </div>
-          <div
-            style={{
-              ...menuItemStyle("help", false),
-              cursor: "pointer",
-            }}
+            className={`${menuItemClasses("help", false)} cursor-pointer`}
             onMouseEnter={() => setHovered("help")}
             onMouseLeave={() => setHovered(null)}
           >
             <Dropdown overlay={helpMenu} trigger={["click"]}>
-              <Button
-                style={{
-                  background: "transparent",
-                  border: "none",
-                  color: "white",
-                  height: "65px",
-                  display: "flex",
-                  alignItems: "center",
-                }}
-              >
+              <Button className="bg-transparent border-none text-white h-16 flex items-center">
                 Help
-                <CaretDownFilled
-                  style={{ fontSize: "10px", marginLeft: "5px" }}
-                />
+                <CaretDownFilled className="text-xs ml-1.5" />
               </Button>
             </Dropdown>
           </div>
         </>
       ) : (
-        <div style={{ marginLeft: "5px" }}>
+        <div className="ml-1.5">
           <Dropdown overlay={mobileMenu} trigger={["click"]}>
-            <Button
-              style={{
-                background: "transparent",
-                border: "none",
-                color: "white",
-                height: "65px",
-                display: "flex",
-                alignItems: "center",
-              }}
-            >
-              <MenuOutlined style={{ fontSize: "20px" }} />
+            <Button className="bg-transparent border-none text-white h-16 flex items-center">
+              <MenuOutlined className="text-xl text-white" />
             </Button>
           </Dropdown>
         </div>
       )}
-      <div
-        style={{
-          display: "flex",
-          marginLeft: "auto",
-          alignItems: "center",
-          height: "65px",
-          gap: screens.md ? "20px" : "10px",
-          marginRight: screens.md ? 0 : "5px"
-        }}
-      >
-        <div style={{ marginLeft: screens.md ? 0 : "auto" }}>
+      
+      <div className={`flex ml-auto items-center h-16 ${
+        screens.md ? "gap-5 mr-0" : "gap-2.5 mr-1.5"
+      }`}>
+        <div className={screens.md ? "ml-0" : "ml-auto"}>
           <ToggleDarkMode />
         </div>
+        
         {!isLearnPage && (
           <div
-            style={{
-              height: "40px",
-              display: "flex",
-              justifyContent: "center",
-              alignItems: "center",
-              boxShadow: hovered === "join" ? "0 0 10px 10px rgba(255, 255, 255, 0.1)": "none", 
-              cursor: "pointer",
-              borderRadius: "5px"
-            }}
+            className={`h-10 flex justify-center items-center cursor-pointer rounded-md ${
+              hovered === "join" ? "shadow-[0_0_10px_10px_rgba(255,255,255,0.1)]" : ""
+            }`}
             onMouseEnter={() => setHovered("join")}
             onMouseLeave={() => setHovered(null)}
           >
             <Link to="/learn/intro" className="learnNow-button">
-              <button
-                style={{
-                  ...props,
-                  padding: "10px 22px",
-                  backgroundColor: "#19c6c7",
-                  color: "#050c40",
-                  border: "none",
-                  borderRadius: "5px",
-                  cursor: "pointer",
-                } as any}
+              <animated.button
+                style={props}
+                className="px-[22px] py-[10px] bg-[#19c6c7] text-[#050c40] border-none rounded-md cursor-pointer"
               >
                 Learn
-              </button>
+              </animated.button>
             </Link>
           </div>
         )}
+        
         <div
-          style={{
-            height: "65px",
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "center",
-            padding: screens.md ? "0 20px" : "0 10px",
-            borderRadius: "5px",
-            borderLeft: screens.md
-              ? "1.5px solid rgba(255, 255, 255, 0.1)"
-              : "none",
-            paddingLeft: screens.md ? 16 : 5,
-            paddingRight: screens.md ? 16 : 5,
-            backgroundColor:
-              hovered === "github" ? "rgba(255, 255, 255, 0.1)" : "transparent",
-            cursor: "pointer",
-          }}
+          className={`h-16 flex items-center justify-center rounded-md cursor-pointer ${
+            screens.md 
+              ? "px-5 border-l border-white border-opacity-10 pl-4 pr-4" 
+              : "px-2.5 pl-1.5 pr-1.5"
+          } ${
+            hovered === "github" ? "bg-white bg-opacity-10" : "bg-transparent"
+          }`}
           onMouseEnter={() => setHovered("github")}
           onMouseLeave={() => setHovered(null)}
         >
@@ -311,16 +386,12 @@ function Navbar({ scrollToFooter }: NavbarProps) {
             href="https://github.com/accordproject/template-playground"
             target="_blank"
             rel="noopener noreferrer"
-            style={{ display: "flex", alignItems: "center", color: "white" }}
+            className="flex items-center text-white"
           >
-            <GithubOutlined
-              style={{
-                fontSize: "20px",
-                color: "white",
-                marginRight: screens.md ? "5px" : "0",
-              }}
-            />
-            <span style={{ display: screens.md ? "inline" : "none" }}>Github</span>
+            <GithubOutlined className={`text-xl text-white ${
+              screens.md ? "mr-1.5" : "mr-0"
+            }`} />
+            <span className={screens.md ? "inline" : "hidden"}>Github</span>
           </a>
         </div>
       </div>
diff --git a/src/components/PlaygroundSidebar.tsx b/src/components/PlaygroundSidebar.tsx
new file mode 100644
index 00000000..fec9f226
--- /dev/null
+++ b/src/components/PlaygroundSidebar.tsx
@@ -0,0 +1,173 @@
+import React from "react";
+import { IoCodeSlash } from "react-icons/io5";
+import { VscOutput } from "react-icons/vsc";
+import { FiTerminal, FiShare2, FiSettings } from "react-icons/fi";
+import { FaCirclePlay } from "react-icons/fa6";
+import useAppStore from "../store/store";
+import { message } from "antd";
+import FullScreenModal from "./FullScreenModal";
+import tour from "./Tour";
+import "../styles/components/PlaygroundSidebar.css";
+
+const PlaygroundSidebar = () => {
+  const { 
+    isEditorsVisible,
+    isPreviewVisible,
+    isProblemPanelVisible,
+    setEditorsVisible,
+    setPreviewVisible,
+    setProblemPanelVisible,
+    generateShareableLink,
+  } = useAppStore((state) => ({
+    isEditorsVisible: state.isEditorsVisible,
+    isPreviewVisible: state.isPreviewVisible,
+    isProblemPanelVisible: state.isProblemPanelVisible,
+    setEditorsVisible: state.setEditorsVisible,
+    setPreviewVisible: state.setPreviewVisible,
+    setProblemPanelVisible: state.setProblemPanelVisible,
+    generateShareableLink: state.generateShareableLink,
+  }));
+
+  const handleShare = async () => {
+    try {
+      const link = generateShareableLink();
+      await navigator.clipboard.writeText(link);
+      void message.success('Link copied to clipboard!');
+    } catch (err) {
+      console.error('Error copying to clipboard:', err);
+      void message.error('Failed to copy link to clipboard');
+    }
+  };
+
+  const handleSettings = () => {
+    void message.info('Settings feature coming soon!');
+  };
+
+  const handleStartTour = async () => {
+    try {
+      await tour.start();
+      localStorage.setItem("hasVisited", "true");
+    } catch (error) {
+      console.error("Tour failed to start:", error);
+    }
+  };
+
+  const handleEditorToggle = () => {
+    if (isEditorsVisible && !isPreviewVisible) {
+      void message.info('At least one panel must be visible');
+      return;
+    }
+    setEditorsVisible(!isEditorsVisible);
+  };
+
+  const handlePreviewToggle = () => {
+    if (isPreviewVisible && !isEditorsVisible) {
+      void message.info('At least one panel must be visible');
+      return;
+    }
+    setPreviewVisible(!isPreviewVisible);
+  };
+
+  interface NavItem {
+    title: string;
+    icon?: React.ComponentType<{ size: number }>;
+    component?: React.ReactNode;
+    onClick?: () => void;
+    active?: boolean;
+  }
+
+  const navTop: NavItem[] = [
+    { 
+      title: "Editor", 
+      icon: IoCodeSlash, 
+      onClick: handleEditorToggle,
+      active: isEditorsVisible
+    },
+    { 
+      title: "Preview", 
+      icon: VscOutput,
+      onClick: handlePreviewToggle,
+      active: isPreviewVisible
+    },
+    { 
+      title: "Problems", 
+      icon: FiTerminal,
+      onClick: () => setProblemPanelVisible(!isProblemPanelVisible),
+      active: isProblemPanelVisible
+    },
+    { 
+      title: "Fullscreen", 
+      component: <FullScreenModal />
+    },
+  ];
+
+  interface NavBottomItem {
+    title: string;
+    icon: React.ComponentType<{ size: number }>;
+    onClick: () => void;
+  }
+
+  const navBottom: NavBottomItem[] = [
+    { 
+      title: "Share", 
+      icon: FiShare2,
+      onClick: () => void handleShare()
+    },
+    { 
+      title: "Start Tour", 
+      icon: FaCirclePlay,
+      onClick: () => void handleStartTour()
+    },
+    { 
+      title: "Settings", 
+      icon: FiSettings,
+      onClick: handleSettings
+    },
+  ];
+
+  return (
+    <aside className="playground-sidebar">
+      <nav className="playground-sidebar-nav">
+        {navTop.map(({ title, icon: Icon, component, onClick, active }) => (
+          <div
+            key={title}
+            role="button"
+            aria-label={title}
+            tabIndex={0}
+            onClick={onClick}
+            className={`group playground-sidebar-nav-item ${
+              active ? 'playground-sidebar-nav-item-active' : 'playground-sidebar-nav-item-inactive'
+            } tour-${title.toLowerCase().replace(' ', '-')}`}
+          >
+            {component ? (
+              <div className="playground-sidebar-nav-item-icon-container">
+                {component}
+              </div>
+            ) : Icon ? (
+              <Icon size={24} />
+            ) : null}
+            <span className="playground-sidebar-nav-item-title">{title}</span>
+          </div>
+        ))}
+      </nav>
+
+      <nav className="playground-sidebar-nav-bottom">
+        {navBottom.map(({ title, icon: Icon, onClick }) => (
+          <div
+            key={title}
+            role="button"
+            aria-label={title}
+            tabIndex={0}
+            onClick={onClick}
+            className={`group playground-sidebar-nav-bottom-item tour-${title.toLowerCase().replace(' ', '-')}`}
+          >
+            <Icon size={22} />
+            <span className="playground-sidebar-nav-item-title">{title}</span>
+          </div>
+        ))}
+      </nav>
+    </aside>
+  );
+};
+
+export default PlaygroundSidebar;
\ No newline at end of file
diff --git a/src/components/ProblemPanel.tsx b/src/components/ProblemPanel.tsx
new file mode 100644
index 00000000..118e6954
--- /dev/null
+++ b/src/components/ProblemPanel.tsx
@@ -0,0 +1,150 @@
+import React, { useMemo } from 'react';
+import useAppStore from '../store/store';
+import '../styles/components/ProblemPanel.css';
+
+export interface ProblemItem {
+  id: string;
+  type: 'error' | 'warning' | 'info';
+  message: string;
+  source?: string;
+  line?: number;
+  column?: number;
+  timestamp: Date;
+}
+
+const ProblemPanel: React.FC = () => {
+  const { error, backgroundColor, textColor } = useAppStore((state) => ({ 
+    error: state.error,
+    backgroundColor: state.backgroundColor,
+    textColor: state.textColor
+  }));
+  
+  const parseError = (errorMessage: string) => {
+    const errors: Omit<ProblemItem, 'id' | 'timestamp'>[] = [];
+    
+    const errorParts = errorMessage.split(/\n(?=Error:|TypeError:|SyntaxError:|ReferenceError:)/);
+    
+    errorParts.forEach((part) => {
+      if (!part.trim()) return;
+      
+      const lineMatch = part.match(/[Ll]ine (\d+)/);
+      const columnMatch = part.match(/[Cc]olumn? (\d+)/);
+      
+      let type: 'error' | 'warning' | 'info' = 'error';
+      let source = 'Template Compilation';
+      
+      if (part.includes('Warning') || part.includes('warning')) {
+        type = 'warning';
+      } else if (part.includes('Info') || part.includes('info')) {
+        type = 'info';
+      }
+      
+      if (part.includes('model') || part.includes('Model') || part.includes('CTO')) {
+        source = 'Concerto Model';
+      } else if (part.includes('template') || part.includes('Template') || part.includes('mark')) {
+        source = 'TemplateMark';
+      } else if (part.includes('data') || part.includes('JSON')) {
+        source = 'JSON Data';
+      }
+      
+      errors.push({
+        type,
+        message: part.trim(),
+        source,
+        line: lineMatch ? parseInt(lineMatch[1]) : undefined,
+        column: columnMatch ? parseInt(columnMatch[1]) : undefined,
+      });
+    });
+    
+    return errors;
+  };
+  
+  const problems = useMemo((): ProblemItem[] => {
+    if (!error) return [];
+    
+    const parsedErrors = parseError(error);
+    return parsedErrors.map((parsedError, index) => ({
+      id: `error-${Date.now()}-${index}`,
+      timestamp: new Date(),
+      ...parsedError
+    }));
+  }, [error]);
+  
+
+  const formatTimestamp = (timestamp: Date) => {
+    return timestamp.toLocaleTimeString('en-US', { 
+      hour12: false, 
+      hour: '2-digit', 
+      minute: '2-digit', 
+      second: '2-digit' 
+    });
+  };
+
+  return (
+    <div className="problem-panel-container" style={{ backgroundColor }}>
+      <div className={`problem-panel-header ${backgroundColor === '#ffffff' ? 'problem-panel-header-light' : 'problem-panel-header-dark'}`}>
+        <span className="problem-panel-title">Problems</span>
+      </div>
+      <div className="problem-panel-content" style={{ backgroundColor }}>
+        {problems.length === 0 ? (
+          <div className="problem-panel-empty-state">
+            <div className="problem-panel-empty-state-content">
+              <div className="problem-panel-empty-state-icon">✨</div>
+              <div className="problem-panel-empty-state-text" style={{ color: textColor }}>No problems detected</div>
+            </div>
+          </div>
+        ) : (
+          <div className="problem-panel-problems-list">
+            {problems.map((problem) => (
+              <div
+                key={problem.id}
+                className={`problem-panel-problem-item ${
+                  backgroundColor === '#ffffff' ? 'problem-panel-problem-item-light' : 'problem-panel-problem-item-dark'
+                } ${
+                  problem.type === 'error' ? 'problem-panel-problem-item-error' :
+                  problem.type === 'warning' ? 'problem-panel-problem-item-warning' :
+                  'problem-panel-problem-item-info'
+                }`}
+              >
+                <div className="problem-panel-problem-content">
+                  <div className="problem-panel-problem-details">
+                    <div className="problem-panel-problem-meta">
+                      <div className="problem-panel-problem-tags">
+                        <span className="problem-panel-problem-type-badge">
+                          {problem.type.toUpperCase()}
+                        </span>
+                        {problem.source && (
+                          <span className="problem-panel-problem-source" style={{ color: textColor }}>
+                            {problem.source}
+                          </span>
+                        )}
+                        {(problem.line || problem.column) && (
+                          <span className="problem-panel-problem-location" style={{ color: textColor }}>
+                            {problem.line && `Line ${problem.line}`}
+                            {problem.line && problem.column && ':'}
+                            {problem.column && `Col ${problem.column}`}
+                          </span>
+                        )}
+                      </div>
+                      <span className="problem-panel-problem-timestamp" style={{ color: textColor }}>
+                        {formatTimestamp(problem.timestamp)}
+                      </span>
+                    </div>
+                    
+                    <div className="problem-panel-problem-message-container">
+                      <p className="problem-panel-problem-message" style={{ color: textColor }}>
+                        {problem.message}
+                      </p>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default ProblemPanel; 
\ No newline at end of file
diff --git a/src/components/Tour.ts b/src/components/Tour.ts
index 38668dde..0a060b99 100644
--- a/src/components/Tour.ts
+++ b/src/components/Tour.ts
@@ -27,7 +27,7 @@ tour.addStep({
   buttons: [
     {
       text: "Skip",
-      action: tour.cancel,
+      action: () => void tour.cancel(),
       classes: "shepherd-button-secondary",
     },
     {
@@ -38,8 +38,8 @@ tour.addStep({
 });
 
 tour.addStep({
-  id: "samples",
-  text: "Here is the 'Templates' dropdown. This dropdown contains various templates that you can edit and experiment with. Select a template to see and modify its details.",
+  id: "template-dropdown",
+  text: "Here is the 'Template' dropdown. This dropdown contains various templates that you can edit and experiment with. Select a template to see and modify its details.",
   attachTo: {
     element: ".samples-element",
     on: "bottom",
@@ -47,7 +47,87 @@ tour.addStep({
   buttons: [
     {
       text: "Skip",
-      action: tour.cancel,
+      action: () => void tour.cancel(),
+      classes: "shepherd-button-secondary",
+    },
+    {
+      text: "Next",
+      action: () => tour.next(),
+    },
+  ],
+});
+
+tour.addStep({
+  id: "toggle-editor",
+  text: "Use this button to toggle the editor panel on/off. The editor panel contains the Concerto Model, TemplateMark, and JSON Data editors.",
+  attachTo: {
+    element: ".tour-editor",
+    on: "right",
+  },
+  buttons: [
+    {
+      text: "Skip",
+      action: () => void tour.cancel(),
+      classes: "shepherd-button-secondary",
+    },
+    {
+      text: "Next",
+      action: () => tour.next(),
+    },
+  ],
+});
+
+tour.addStep({
+  id: "toggle-preview",
+  text: "Toggle the preview window to show or hide the live preview of your template. This helps you see the results of your edits in real-time.",
+  attachTo: {
+    element: ".tour-preview",
+    on: "right",
+  },
+  buttons: [
+    {
+      text: "Skip",
+      action: () => void tour.cancel(),
+      classes: "shepherd-button-secondary",
+    },
+    {
+      text: "Next",
+      action: () => tour.next(),
+    },
+  ],
+});
+
+tour.addStep({
+  id: "toggle-problems",
+  text: "Toggle the problems panel to view compilation errors and warnings. This helps you debug issues in your template and model.",
+  attachTo: {
+    element: ".tour-problems",
+    on: "right",
+  },
+  buttons: [
+    {
+      text: "Skip",
+      action: () => void tour.cancel(),
+      classes: "shepherd-button-secondary",
+    },
+    {
+      text: "Next",
+      action: () => tour.next(),
+    },
+  ],
+});
+
+tour.addStep({
+  id: "fullscreen-modal",
+  text: "Open the preview in fullscreen mode for better viewing. This allows you to see your template output in a larger, focused view.",
+  attachTo: {
+    element: ".tour-fullscreen",
+    on: "right",
+  },
+  buttons: [
+    {
+      text: "Skip",
+      action: () => void tour.cancel(),
       classes: "shepherd-button-secondary",
     },
     {
@@ -58,16 +138,16 @@ tour.addStep({
 });
 
 tour.addStep({
-  id: "share",
+  id: "template-share",
   text: "Use this 'Share' button to generate and share a link for any created or edited templates. Share your work with others easily.",
   attachTo: {
-    element: ".share-element",
-    on: "bottom",
+    element: ".tour-share",
+    on: "right",
   },
   buttons: [
     {
       text: "Skip",
-      action: tour.cancel,
+      action: () => void tour.cancel(),
       classes: "shepherd-button-secondary",
     },
     {
@@ -78,16 +158,16 @@ tour.addStep({
 });
 
 tour.addStep({
-  id: "preview",
-  text: "This section shows the live preview of your template. View the results of your edits and see how your template renders.",
+  id: "start-tour-button",
+  text: "Use this button to restart the tour anytime you want to review the features and functionality of the Template Playground.",
   attachTo: {
-    element: ".preview-component",
-    on: "bottom",
+    element: ".tour-start-tour",
+    on: "right",
   },
   buttons: [
     {
       text: "Skip",
-      action: tour.cancel,
+      action: () => void tour.cancel(),
       classes: "shepherd-button-secondary",
     },
     {
@@ -98,7 +178,127 @@ tour.addStep({
 });
 
 tour.addStep({
-  id: "darkmode",
+  id: "editor-settings",
+  text: "Access editor settings and configuration options here. Customize your editing experience to suit your preferences.",
+  attachTo: {
+    element: ".tour-settings",
+    on: "right",
+  },
+  buttons: [
+    {
+      text: "Skip",
+      action: () => void tour.cancel(),
+      classes: "shepherd-button-secondary",
+    },
+    {
+      text: "Next",
+      action: () => tour.next(),
+    },
+  ],
+});
+
+tour.addStep({
+  id: "ai-assistant",
+  text: "Use the AI Assistant to get help with creating and editing your templates. The AI can provide suggestions and guidance for your template development.",
+  attachTo: {
+    element: ".tour-ai-assistant",
+    on: "left",
+  },
+  buttons: [
+    {
+      text: "Skip",
+      action: () => void tour.cancel(),
+      classes: "shepherd-button-secondary",
+    },
+    {
+      text: "Next",
+      action: () => tour.next(),
+    },
+  ],
+});
+
+tour.addStep({
+  id: "concerto-model",
+  text: "This is the Concerto Model editor. Define the data model for your template including types, concepts, and business logic here.",
+  attachTo: {
+    element: ".tour-concerto-model",
+    on: "top",
+  },
+  buttons: [
+    {
+      text: "Skip",
+      action: () => void tour.cancel(),
+      classes: "shepherd-button-secondary",
+    },
+    {
+      text: "Next",
+      action: () => tour.next(),
+    },
+  ],
+});
+
+tour.addStep({
+  id: "template-mark",
+  text: "This is the TemplateMark editor. Write your natural language template with embedded variables, conditional sections, and TypeScript code.",
+  attachTo: {
+    element: ".tour-template-mark",
+    on: "top",
+  },
+  buttons: [
+    {
+      text: "Skip",
+      action: () => void tour.cancel(),
+      classes: "shepherd-button-secondary",
+    },
+    {
+      text: "Next",
+      action: () => tour.next(),
+    },
+  ],
+});
+
+tour.addStep({
+  id: "json-data",
+  text: "This is the JSON Data editor. Provide sample data that matches your Concerto model to test and preview your template.",
+  attachTo: {
+    element: ".tour-json-data",
+    on: "top",
+  },
+  buttons: [
+    {
+      text: "Skip",
+      action: () => void tour.cancel(),
+      classes: "shepherd-button-secondary",
+    },
+    {
+      text: "Next",
+      action: () => tour.next(),
+    },
+  ],
+});
+
+tour.addStep({
+  id: "preview-panel",
+  text: "This section shows the live preview of your template. View the results of your edits and see how your template renders with the provided data.",
+  attachTo: {
+    element: ".tour-preview-panel",
+    on: "top",
+  },
+  buttons: [
+    {
+      text: "Skip",
+      action: () => void tour.cancel(),
+      classes: "shepherd-button-secondary",
+    },
+    {
+      text: "Next",
+      action: () => tour.next(),
+    },
+  ],
+});
+
+tour.addStep({
+  id: "dark-mode-toggle",
   text: "Toggle between light and dark mode for a comfortable viewing experience. Switch themes to suit your preference while working on your template.",
   attachTo: {
     element: ".dark-mode-toggle",
@@ -107,7 +307,7 @@ tour.addStep({
   buttons: [
     {
       text: "Skip",
-      action: tour.cancel,
+      action: () => void tour.cancel(),
       classes: "shepherd-button-secondary",
     },
     {
@@ -118,8 +318,8 @@ tour.addStep({
 });
 
 tour.addStep({
-  id: "learnNow",
-  text: 'Click the "Learn Now" button to access the Learning Pathway. Here, you will find comprehensive documentation and tutorials to help you create templates effectively.',
+  id: "learn-button",
+  text: 'Click the "Learn" button to access the Learning Pathway. Here, you will find comprehensive documentation and tutorials to help you create templates effectively.',
   attachTo: {
     element: ".learnNow-button",
     on: "bottom",
diff --git a/src/components/useUndoRedo.ts b/src/components/useUndoRedo.ts
index 3b618765..8b91ba96 100644
--- a/src/components/useUndoRedo.ts
+++ b/src/components/useUndoRedo.ts
@@ -1,16 +1,24 @@
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 
 function useUndoRedo<T>(initialValue: T, onChange?: (value: T) => void, onSync?: (value: T) => Promise<void>) {
   const [past, setPast] = useState<T[]>([]);
   const [present, setPresent] = useState<T>(initialValue);
   const [future, setFuture] = useState<T[]>([]);
 
+  useEffect(() => {
+    if (initialValue !== present) {
+      setPresent(initialValue);
+      setPast([]);
+      setFuture([]);
+    }
+  }, [initialValue, present]);
+
   const setValue = (newValue: T) => {
     setPast((prevPast) => [...prevPast, present]);
     setPresent(newValue);
     setFuture([]);
     if (onChange) onChange(newValue); // Update editor state
-    if (onSync) onSync(newValue); // Sync to main state and rebuild
+    if (onSync) void onSync(newValue);
   };
 
   const undo = () => {
@@ -19,8 +27,8 @@ function useUndoRedo<T>(initialValue: T, onChange?: (value: T) => void, onSync?:
     setPast((prevPast) => prevPast.slice(0, -1));
     setFuture((prevFuture) => [present, ...prevFuture]);
     setPresent(previous);
-    if (onChange) onChange(previous); // Update editor state
-    if (onSync) onSync(previous); // Sync to main state and rebuild
+    if (onChange) onChange(previous);
+    if (onSync) void onSync(previous);
   };
 
   const redo = () => {
@@ -29,8 +37,8 @@ function useUndoRedo<T>(initialValue: T, onChange?: (value: T) => void, onSync?:
     setFuture((prevFuture) => prevFuture.slice(1));
     setPast((prevPast) => [...prevPast, present]);
     setPresent(next);
-    if (onChange) onChange(next); // Update editor state
-    if (onSync) onSync(next); // Sync to main state and rebuild
+    if (onChange) onChange(next);
+    if (onSync) void onSync(next);
   };
 
   return { value: present, setValue, undo, redo };
diff --git a/src/editors/ConcertoEditor.tsx b/src/editors/ConcertoEditor.tsx
index 07a97f18..c3e6a74c 100644
--- a/src/editors/ConcertoEditor.tsx
+++ b/src/editors/ConcertoEditor.tsx
@@ -193,12 +193,12 @@ export default function ConcertoEditor({
   }, [ctoErr, monacoInstance]);
 
   return (
-    <div className="editorwrapper relative">
+    <div className="editorwrapper h-full w-full">
       <Suspense fallback={<div>Loading Editor...</div>}>
         <MonacoEditor
           options={options}
           language="concerto"
-          height="60vh"
+          height="100%"
           value={value}
           beforeMount={handleEditorWillMount}
           onMount={handleEditorDidMount}
diff --git a/src/editors/JSONEditor.tsx b/src/editors/JSONEditor.tsx
index f49cda16..f5b577a1 100644
--- a/src/editors/JSONEditor.tsx
+++ b/src/editors/JSONEditor.tsx
@@ -47,12 +47,12 @@ export default function JSONEditor({
   );
 
   return (
-    <div className="editorwrapper relative">
+    <div className="editorwrapper h-full w-full">
       <Suspense fallback={<div>Loading Editor...</div>}>
         <MonacoEditor
           options={options}
           language="json"
-          height="60vh"
+          height="100%"
           value={value}
           onMount={handleEditorDidMount}
           onChange={handleChange}
diff --git a/src/editors/MarkdownEditor.tsx b/src/editors/MarkdownEditor.tsx
index 65b7ca7f..48a53aa9 100644
--- a/src/editors/MarkdownEditor.tsx
+++ b/src/editors/MarkdownEditor.tsx
@@ -67,12 +67,12 @@ export default function MarkdownEditor({
   );
 
   return (
-    <div className="editorwrapper relative">
+    <div className="editorwrapper h-full w-full">
       <Suspense fallback={<div>Loading Editor...</div>}>
         <MonacoEditor
           options={editorOptions}
           language="markdown"
-          height="60vh"
+          height="100%"
           value={value}
           onMount={handleEditorDidMount}
           onChange={handleChange}
diff --git a/src/editors/editorsContainer/AgreementData.tsx b/src/editors/editorsContainer/AgreementData.tsx
index 74d6059b..1711e900 100644
--- a/src/editors/editorsContainer/AgreementData.tsx
+++ b/src/editors/editorsContainer/AgreementData.tsx
@@ -2,14 +2,11 @@ import JSONEditor from "../JSONEditor";
 import useAppStore from "../../store/store";
 import useUndoRedo from "../../components/useUndoRedo";
 
-import { FaUndo, FaRedo } from "react-icons/fa";
-
 function AgreementData() {
-  const textColor = useAppStore((state) => state.textColor);
   const editorAgreementData = useAppStore((state) => state.editorAgreementData);
   const setEditorAgreementData = useAppStore((state) => state.setEditorAgreementData);
   const setData = useAppStore((state) => state.setData);
-  const { value, setValue, undo, redo } = useUndoRedo(
+  const { value, setValue } = useUndoRedo(
     editorAgreementData,
     setEditorAgreementData,
     setData // Sync to main state and rebuild
@@ -23,19 +20,7 @@ function AgreementData() {
   };
 
   return (
-    <div className="column">
-      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
-        <h3 style={{ color: textColor }}>Data</h3>
-        <div>
-          <FaUndo onClick={undo} title="Undo" style={{ cursor: "pointer", color: textColor, marginRight: "8px" }} />
-          <FaRedo onClick={redo} title="Redo" style={{ cursor: "pointer", color: textColor }} />
-        </div>
-      </div>
-      <p style={{ color: textColor }}>
-        JSON data (an instance of the Concerto model) used to preview output from the template.
-      </p>
-      <JSONEditor value={value} onChange={handleChange} />
-    </div>
+    <JSONEditor value={value} onChange={handleChange} />
   );
 }
 
diff --git a/src/editors/editorsContainer/TemplateMarkdown.tsx b/src/editors/editorsContainer/TemplateMarkdown.tsx
index 28e91af6..80824294 100644
--- a/src/editors/editorsContainer/TemplateMarkdown.tsx
+++ b/src/editors/editorsContainer/TemplateMarkdown.tsx
@@ -1,15 +1,12 @@
 import MarkdownEditor from "../MarkdownEditor";
 import useAppStore from "../../store/store";
 import useUndoRedo from "../../components/useUndoRedo";
-import { FaUndo, FaRedo } from "react-icons/fa";
 
 function TemplateMarkdown() {
-  const textColor = useAppStore((state) => state.textColor);
-  const backgroundColor = useAppStore((state) => state.backgroundColor);
   const editorValue = useAppStore((state) => state.editorValue);
   const setEditorValue = useAppStore((state) => state.setEditorValue);
   const setTemplateMarkdown = useAppStore((state) => state.setTemplateMarkdown);
-  const { value, setValue, undo, redo } = useUndoRedo(
+  const { value, setValue} = useUndoRedo(
     editorValue,
     setEditorValue,
     setTemplateMarkdown // Sync to main state and rebuild
@@ -23,19 +20,7 @@ function TemplateMarkdown() {
   };
 
   return (
-    <div className="column" style={{ backgroundColor }}>
-      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
-        <h3 style={{ color: textColor }}>TemplateMark</h3>
-        <div>
-          <FaUndo onClick={undo} title="Undo" style={{ cursor: "pointer", color: textColor, marginRight: "8px" }} />
-          <FaRedo onClick={redo} title="Redo" style={{ cursor: "pointer", color: textColor }} />
-        </div>
-      </div>
-      <p style={{ color: textColor }}>
-        A natural language template with embedded variables, conditional sections, and TypeScript code.
-      </p>
-      <MarkdownEditor value={value} onChange={handleChange} />
-    </div>
+    <MarkdownEditor value={value} onChange={handleChange} />
   );
 }
 
diff --git a/src/editors/editorsContainer/TemplateModel.tsx b/src/editors/editorsContainer/TemplateModel.tsx
index ca4f0fc8..d6661161 100644
--- a/src/editors/editorsContainer/TemplateModel.tsx
+++ b/src/editors/editorsContainer/TemplateModel.tsx
@@ -2,14 +2,11 @@ import ConcertoEditor from "../ConcertoEditor";
 import useAppStore from "../../store/store";
 import useUndoRedo from "../../components/useUndoRedo";
 
-import { FaUndo, FaRedo } from "react-icons/fa";
-
 function TemplateModel() {
-  const textColor = useAppStore((state) => state.textColor);
   const editorModelCto = useAppStore((state) => state.editorModelCto);
   const setEditorModelCto = useAppStore((state) => state.setEditorModelCto);
   const setModelCto = useAppStore((state) => state.setModelCto);
-  const { value, setValue, undo, redo } = useUndoRedo(
+  const { value, setValue} = useUndoRedo(
     editorModelCto,
     setEditorModelCto,
     setModelCto // Sync to main state and rebuild
@@ -23,19 +20,7 @@ function TemplateModel() {
   };
 
   return (
-    <div className="column">
-      <div className="tooltip" style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
-        <h3 style={{ color: textColor }}>Concerto Model</h3>
-        <div>
-          <FaUndo onClick={undo} title="Undo" style={{ cursor: "pointer", color: textColor, marginRight: "8px" }} />
-          <FaRedo onClick={redo} title="Redo" style={{ cursor: "pointer", color: textColor }} />
-        </div>
-      </div>
-      <span style={{ color: textColor }} className="tooltiptext">
-        Defines the data model for the template and its logic.
-      </span>
-      <ConcertoEditor value={value} onChange={handleChange} />
-    </div>
+    <ConcertoEditor value={value} onChange={handleChange} />
   );
 }
 
diff --git a/src/pages/LearnNow.tsx b/src/pages/LearnNow.tsx
index 14e9acb1..e211ee0e 100644
--- a/src/pages/LearnNow.tsx
+++ b/src/pages/LearnNow.tsx
@@ -1,13 +1,13 @@
 import React from "react";
 import { Outlet } from "react-router-dom";
-import Sidebar from "../components/Sidebar";
+import LearningPathwaySidebar from "../components/LearningPathwaySidebar";
 import { LearnNowContainer, ContentContainer } from "../styles/pages/LearnNow";
 import { steps } from "../constants/learningSteps/steps";
 
 const LearnNow: React.FC = () => {
   return (
     <LearnNowContainer>
-        <Sidebar steps={steps} />
+        <LearningPathwaySidebar steps={steps} />
       <ContentContainer>
         <Outlet />
       </ContentContainer>
diff --git a/src/pages/MainContainer.tsx b/src/pages/MainContainer.tsx
new file mode 100644
index 00000000..6132c92f
--- /dev/null
+++ b/src/pages/MainContainer.tsx
@@ -0,0 +1,175 @@
+import { Panel, PanelGroup, PanelResizeHandle } from "react-resizable-panels";
+import AgreementData from "../editors/editorsContainer/AgreementData";
+import TemplateModel from "../editors/editorsContainer/TemplateModel";
+import TemplateMarkdown from "../editors/editorsContainer/TemplateMarkdown";
+import useAppStore from "../store/store";
+import { AIChatPanel } from "../components/AIChatPanel";
+import ProblemPanel from "../components/ProblemPanel";
+import SampleDropdown from "../components/SampleDropdown";
+import { useState } from "react";
+import "../styles/pages/MainContainer.css";
+
+const MainContainer = () => {
+  const agreementHtml = useAppStore((state) => state.agreementHtml);
+  const backgroundColor = useAppStore((state) => state.backgroundColor);
+  const textColor = useAppStore((state) => state.textColor);
+  const {
+    isAIChatOpen,
+    setAIChatOpen,
+    isEditorsVisible,
+    isPreviewVisible,
+    isProblemPanelVisible,
+  } = useAppStore((state) => ({
+    isAIChatOpen: state.isAIChatOpen,
+    setAIChatOpen: state.setAIChatOpen,
+    isEditorsVisible: state.isEditorsVisible,
+    isPreviewVisible: state.isPreviewVisible,
+    isProblemPanelVisible: state.isProblemPanelVisible,
+  }));
+
+  const [, setLoading] = useState(true);
+
+  return (
+    <div className="main-container" style={{ backgroundColor }}>
+      <PanelGroup direction="horizontal" className="main-container-panel-group"
+       style={{position: "fixed", width: "calc(100% - 64px)", height: "calc(100% - 64px)"}}>
+        {isEditorsVisible && (
+          <>
+            <Panel defaultSize={50} minSize={30}>
+              <div className="main-container-editors-panel" style={{ backgroundColor }}>
+                <PanelGroup direction="vertical" className="main-container-editors-panel-group">
+                  <Panel defaultSize={30} minSize={20}>
+                    <div className="main-container-editor-section tour-concerto-model">
+                      <div className={`main-container-editor-header ${backgroundColor === '#ffffff' ? 'main-container-editor-header-light' : 'main-container-editor-header-dark'}`}>
+                        {/* Left side */}
+                        <div className="main-container-editor-header-left">
+                          <span>Concerto Model</span>
+                          <SampleDropdown setLoading={setLoading} />
+                        </div>
+                        <button
+                          id="ai-assistant"
+                          onClick={() => setAIChatOpen(!isAIChatOpen)}
+                          className="main-container-ai-assistant-button tour-ai-assistant"
+                        >
+                          <svg
+                            xmlns="http://www.w3.org/2000/svg"
+                            viewBox="0 0 45 20"
+                            fill="none"
+                            className="main-container-ai-assistant-icon"
+                          >
+                            <path
+                              strokeLinecap="round"
+                              strokeLinejoin="round"
+                              strokeWidth={1.5}
+                              stroke="currentColor"
+                              d="M12 13.25c4.97 0 9-3.694 9-8.25s-4.03-8.25-9-8.25S3 0.444 3 5c0 2.104.859 4.023 2.273 5.48.432.447.74 1.04.586 1.641a4.483 4.483 0 01-.923 1.785A5.969 5.969 0 006 14c1.282 0 2.47-.402 3.445-1.087.81.22 1.668.337 2.555.337z"
+                              transform="translate(0, 3)"
+                            />
+                            <defs>
+                              <linearGradient
+                                id="ai-gradient"
+                                x1="0%"
+                                y1="0%"
+                                x2="100%"
+                                y2="0%"
+                              >
+                                <stop offset="0%" stopColor="#a78bfa" />
+                                <stop offset="50%" stopColor="#ec4899" />
+                                <stop offset="100%" stopColor="#ef4444" />
+                              </linearGradient>
+                            </defs>
+                            <text
+                              x="32"
+                              y="6"
+                              fontSize="16"
+                              fontWeight="bold"
+                              fill="url(#ai-gradient)"
+                              textAnchor="middle"
+                            >
+                              AI
+                            </text>
+                          </svg>
+                          <span>Assistant</span>
+                        </button>
+                      </div>
+                      <div className="main-container-editor-content" style={{ backgroundColor }}>
+                        <TemplateModel />
+                      </div>
+                    </div>
+                  </Panel>
+                  <PanelResizeHandle className="main-container-panel-resize-handle-vertical" />
+
+                  <Panel defaultSize={30} minSize={20}>
+                    <div className="main-container-editor-section tour-template-mark">
+                      <div className={`main-container-editor-header ${backgroundColor === '#ffffff' ? 'main-container-editor-header-light' : 'main-container-editor-header-dark'}`}>
+                        TemplateMark
+                      </div>
+                      <div className="main-container-editor-content" style={{ backgroundColor }}>
+                        <TemplateMarkdown />
+                      </div>
+                    </div>
+                  </Panel>
+
+                  <PanelResizeHandle className="main-container-panel-resize-handle-vertical" />
+
+                  <Panel defaultSize={30} minSize={20}>
+                    <div className="main-container-editor-section tour-json-data">
+                      <div className={`main-container-editor-header ${backgroundColor === '#ffffff' ? 'main-container-editor-header-light' : 'main-container-editor-header-dark'}`}>
+                        JSON Data
+                      </div>
+                      <div className="main-container-editor-content" style={{ backgroundColor }}>
+                        <AgreementData />
+                      </div>
+                    </div>
+                  </Panel>
+                  {isProblemPanelVisible && (
+                    <>
+                      <PanelResizeHandle className="main-container-panel-resize-handle-vertical" />
+                      <Panel defaultSize={25} minSize={15}>
+                        <ProblemPanel />
+                      </Panel>
+                    </>
+                  )}
+                </PanelGroup>
+              </div>
+            </Panel>
+            <PanelResizeHandle className="main-container-panel-resize-handle-horizontal" />
+          </>
+        )}
+        {isPreviewVisible && (
+          <>
+            <Panel defaultSize={30} minSize={20}>
+              <div className="main-container-preview-panel tour-preview-panel" style={{ backgroundColor }}>
+                <div className={`main-container-preview-header ${backgroundColor === '#ffffff' ? 'main-container-preview-header-light' : 'main-container-preview-header-dark'}`}>
+                  <span>Preview</span>
+                </div>
+                <div className="main-container-preview-content" style={{ backgroundColor }}>
+                  <div className="main-container-preview-text">
+                    <div
+                      className="main-container-agreement"
+                      dangerouslySetInnerHTML={{ __html: agreementHtml }}
+                      style={{
+                        color: textColor,
+                        backgroundColor: backgroundColor,
+                      }}
+                    />
+                  </div>
+                </div>
+              </div>
+            </Panel>
+            <PanelResizeHandle className="main-container-panel-resize-handle-horizontal" />
+          </>
+        )}
+        {isAIChatOpen && (
+          <>
+            <Panel defaultSize={25} minSize={20}>
+              <AIChatPanel />
+            </Panel>
+          </>
+        )}
+      </PanelGroup>
+    </div>
+  );
+};
+
+export default MainContainer;
diff --git a/src/store/store.ts b/src/store/store.ts
index c06ad9bd..b6d4224e 100644
--- a/src/store/store.ts
+++ b/src/store/store.ts
@@ -48,6 +48,13 @@ interface AppState {
   setAIConfig: (config: AIConfig | null) => void;
   setChatAbortController: (controller: AbortController | null) => void;
   resetChat: () => void;
+  isEditorsVisible: boolean;
+  isPreviewVisible: boolean;
+  isProblemPanelVisible: boolean;
+  setEditorsVisible: (value: boolean) => void;
+  setPreviewVisible: (value: boolean) => void;
+  setProblemPanelVisible: (value: boolean) => void;
+  startTour: () => void;
 }
 
 export interface DecompressedData {
@@ -82,12 +89,27 @@ async function rebuild(template: string, model: string, dataString: string) {
   );
 }
 
+const getInitialTheme = () => {
+  if (typeof window !== 'undefined') {
+    const savedTheme = localStorage.getItem('theme');
+    if (savedTheme === 'dark') {
+      return { backgroundColor: '#121212', textColor: '#ffffff' };
+    } else if (savedTheme === 'light') {
+      return { backgroundColor: '#ffffff', textColor: '#121212' };
+    }
+  }
+  // Default to light theme
+  return { backgroundColor: '#ffffff', textColor: '#121212' };
+};
+
 const useAppStore = create<AppState>()(
   immer(
-    devtools((set, get) => ({
-      backgroundColor: '#ffffff',
-      textColor: '#121212',
-      sampleName: playground.NAME,
+    devtools((set, get) => {
+      const initialTheme = getInitialTheme();
+      return {
+        backgroundColor: initialTheme.backgroundColor,
+        textColor: initialTheme.textColor,
+        sampleName: playground.NAME,
       templateMarkdown: playground.TEMPLATE,
       editorValue: playground.TEMPLATE,
       modelCto: playground.MODEL,
@@ -106,6 +128,24 @@ const useAppStore = create<AppState>()(
       },
       aiConfig: null,
       chatAbortController: null,
+      isEditorsVisible: true,
+      isPreviewVisible: true,
+      isProblemPanelVisible: false,
+      setEditorsVisible: (value) => {
+        const state = get();
+        if (!value && !state.isPreviewVisible) {
+          return;
+        }
+        set({ isEditorsVisible: value });
+      },
+      setPreviewVisible: (value) => {
+        const state = get();
+        if (!value && !state.isEditorsVisible) {
+          return;
+        }
+        set({ isPreviewVisible: value });
+      },
+      setProblemPanelVisible: (value) => set({ isProblemPanelVisible: value }),
       init: async () => {
         const params = new URLSearchParams(window.location.search);
         const compressedData = params.get("data");
@@ -138,7 +178,7 @@ const useAppStore = create<AppState>()(
           const result = await rebuildDeBounce(templateMarkdown, modelCto, data);
           set(() => ({ agreementHtml: result, error: undefined })); // Clear error on success
         } catch (error: any) {
-          set(() => ({ error: formatError(error) }));
+          set(() => ({ error: formatError(error), isProblemPanelVisible: true }));
         }
       },
       setTemplateMarkdown: async (template: string) => {
@@ -148,7 +188,7 @@ const useAppStore = create<AppState>()(
           const result = await rebuildDeBounce(template, modelCto, data);
           set(() => ({ agreementHtml: result, error: undefined })); // Clear error on success
         } catch (error: any) {
-          set(() => ({ error: formatError(error) }));
+          set(() => ({ error: formatError(error), isProblemPanelVisible: true }));
         }
       },
       setEditorValue: (value: string) => {
@@ -161,7 +201,7 @@ const useAppStore = create<AppState>()(
           const result = await rebuildDeBounce(templateMarkdown, model, data);
           set(() => ({ agreementHtml: result, error: undefined })); // Clear error on success
         } catch (error: any) {
-          set(() => ({ error: formatError(error) }));
+          set(() => ({ error: formatError(error), isProblemPanelVisible: true }));
         }
       },
       setEditorModelCto: (value: string) => {
@@ -177,7 +217,7 @@ const useAppStore = create<AppState>()(
           );
           set(() => ({ agreementHtml: result, error: undefined })); // Clear error on success
         } catch (error: any) {
-          set(() => ({ error: formatError(error) }));
+          set(() => ({ error: formatError(error), isProblemPanelVisible: true }));
         }
       },
       setEditorAgreementData: (value: string) => {
@@ -213,16 +253,23 @@ const useAppStore = create<AppState>()(
         } catch (error) {
           set(() => ({
             error: "Failed to load shared content: " + (error instanceof Error ? error.message : "Unknown error"),
+            isProblemPanelVisible: true,
           }));
         }
       },
       toggleDarkMode: () => {
         set((state) => {
           const isDark = state.backgroundColor === '#121212';
-          return {
+          const newTheme = {
             backgroundColor: isDark ? '#ffffff' : '#121212',
             textColor: isDark ? '#121212' : '#ffffff',
           };
+          
+          if (typeof window !== 'undefined') {
+            localStorage.setItem('theme', isDark ? 'light' : 'dark');
+          }
+          
+          return newTheme;
         });
       },
       setAIConfigOpen: (isOpen: boolean) => set(() => ({ isAIConfigOpen: isOpen })),
@@ -234,10 +281,9 @@ const useAppStore = create<AppState>()(
       setAIConfig: (config) => set({ aiConfig: config }),
       setChatAbortController: (controller) => set({ chatAbortController: controller }),
       resetChat: () => {
-        const chatAbortController = get().chatAbortController;
+        const { chatAbortController } = get();
         if (chatAbortController) {
           chatAbortController.abort();
-          get().setChatAbortController(null);
         }
         get().setChatState({
           messages: [],
@@ -245,7 +291,11 @@ const useAppStore = create<AppState>()(
           error: null,
         });
       },
-    }))
+      startTour: () => {
+        console.log('Starting tour...');
+      },
+      }
+    })
   )
 );
 
diff --git a/src/styles/App.css b/src/styles/App.css
index 566b72b4..1158454d 100644
--- a/src/styles/App.css
+++ b/src/styles/App.css
@@ -1,39 +1,15 @@
-.logo {
-  padding: 20px;
+.app-layout {
+  @apply flex flex-row;
 }
 
-blockquote {
-  background: #f9f9f9;
-  border-left: 10px solid #ccc;
-  margin: 1.5em 10px;
-  padding: 0.5em 10px;
-  quotes: "\201C""\201D""\2018""\2019";
-}
-blockquote:before {
-  color: #ccc;
-  content: open-quote;
-  font-size: 4em;
-  line-height: 0.1em;
-  margin-right: 0.25em;
-  vertical-align: -0.4em;
-}
-blockquote p {
-  display: inline;
+.app-content-loading {
+  @apply flex justify-center items-center min-h-[calc(100vh-64px)];
 }
 
-.space-align-container {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: flex-start;
+.app-main-content {
+  @apply h-full;
 }
-.space-align-block {
-  flex: none;
-  margin: 8px 4px;
-  padding: 4px;
-  border: 1px solid #40a9ff;
-}
-.space-align-block .mock-block {
-  display: inline-block;
-  padding: 32px 8px 16px;
-  background: rgba(150, 150, 150, 0.2);
+
+.app-spinner-container {
+  @apply flex-1 flex justify-center items-center;
 }
diff --git a/src/styles/components/PlaygroundSidebar.css b/src/styles/components/PlaygroundSidebar.css
new file mode 100644
index 00000000..730e0983
--- /dev/null
+++ b/src/styles/components/PlaygroundSidebar.css
@@ -0,0 +1,36 @@
+/* PlaygroundSidebar Component Styles */
+.playground-sidebar {
+  @apply w-16 h-full bg-[#1B2540] text-white flex flex-col justify-between items-center py-6 shadow-md;
+}
+
+.playground-sidebar-nav {
+  @apply flex flex-col gap-6;
+}
+
+.playground-sidebar-nav-item {
+  @apply p-[10px] flex flex-col items-center justify-center cursor-pointer transition-colors;
+}
+
+.playground-sidebar-nav-item-active {
+  @apply text-cyan-400;
+}
+
+.playground-sidebar-nav-item-inactive {
+  @apply text-white hover:text-cyan-400;
+}
+
+.playground-sidebar-nav-item-icon-container {
+  @apply flex items-center justify-center;
+}
+
+.playground-sidebar-nav-item-title {
+  @apply sr-only;
+}
+
+.playground-sidebar-nav-bottom {
+  @apply flex flex-col gap-6;
+}
+
+.playground-sidebar-nav-bottom-item {
+  @apply p-[10px] flex flex-col items-center justify-center text-white hover:text-cyan-400 cursor-pointer transition-colors;
+}
diff --git a/src/styles/components/ProblemPanel.css b/src/styles/components/ProblemPanel.css
new file mode 100644
index 00000000..70b28b39
--- /dev/null
+++ b/src/styles/components/ProblemPanel.css
@@ -0,0 +1,107 @@
+.problem-panel-container {
+  @apply h-full flex flex-col border border-gray-200;
+}
+
+.problem-panel-header {
+  @apply flex items-center px-4 py-2 border-b border-gray-200;
+}
+
+.problem-panel-header-light {
+  @apply bg-slate-100 text-gray-700;
+}
+
+.problem-panel-header-dark {
+  @apply bg-gray-700 text-white;
+}
+
+.problem-panel-title {
+  @apply text-sm font-medium;
+}
+
+.problem-panel-content {
+  @apply flex-1 overflow-y-auto;
+}
+
+.problem-panel-empty-state {
+  @apply flex flex-col items-center justify-center h-full text-gray-500;
+}
+
+.problem-panel-empty-state-content {
+  @apply text-center;
+}
+
+.problem-panel-empty-state-icon {
+  @apply text-2xl mb-2;
+}
+
+.problem-panel-empty-state-text {
+  @apply text-sm;
+}
+
+.problem-panel-problems-list {
+  @apply divide-y divide-gray-100;
+}
+
+.problem-panel-problem-item {
+  @apply p-3 cursor-pointer border-l-4;
+}
+
+.problem-panel-problem-item-light {
+  @apply bg-white hover:bg-gray-50;
+}
+
+.problem-panel-problem-item-dark {
+  @apply bg-gray-800 hover:bg-gray-700;
+}
+
+.problem-panel-problem-item-error {
+  @apply border-l-red-500;
+}
+
+.problem-panel-problem-item-warning {
+  @apply border-l-yellow-500;
+}
+
+.problem-panel-problem-item-info {
+  @apply border-l-blue-500;
+}
+
+.problem-panel-problem-content {
+  @apply flex items-start space-x-3;
+}
+
+.problem-panel-problem-details {
+  @apply flex-1 min-w-0;
+}
+
+.problem-panel-problem-meta {
+  @apply flex items-center justify-between;
+}
+
+.problem-panel-problem-tags {
+  @apply flex items-center space-x-2;
+}
+
+.problem-panel-problem-type-badge {
+  @apply inline-flex items-center px-2 py-0.5 rounded text-xs font-medium border;
+}
+
+.problem-panel-problem-source {
+  @apply text-xs;
+}
+
+.problem-panel-problem-location {
+  @apply text-xs;
+}
+
+.problem-panel-problem-timestamp {
+  @apply text-xs;
+}
+
+.problem-panel-problem-message-container {
+  @apply mt-1;
+}
+
+.problem-panel-problem-message {
+  @apply text-sm break-words font-mono;
+}
diff --git a/src/styles/pages/LearnNow.ts b/src/styles/pages/LearnNow.ts
index fd674a52..851572ce 100644
--- a/src/styles/pages/LearnNow.ts
+++ b/src/styles/pages/LearnNow.ts
@@ -2,6 +2,7 @@ import styled from "styled-components";
 
 export const LearnNowContainer = styled.div`
   display: flex;
+  width: 100%;
 `;
 
 export const SidebarContainer = styled.div`
diff --git a/src/styles/pages/MainContainer.css b/src/styles/pages/MainContainer.css
new file mode 100644
index 00000000..7cf38066
--- /dev/null
+++ b/src/styles/pages/MainContainer.css
@@ -0,0 +1,83 @@
+.main-container {
+  @apply h-full;
+}
+
+.main-container-panel-group {
+  @apply h-full;
+}
+
+.main-container-editors-panel {
+  @apply h-full border-r border-gray-200;
+}
+
+.main-container-editors-panel-group {
+  @apply h-full;
+}
+
+.main-container-editor-section {
+  @apply h-full flex flex-col;
+}
+
+.main-container-editor-header {
+  @apply border-b border-gray-200 px-4 py-2 text-sm font-medium flex items-center justify-between;
+}
+
+.main-container-editor-header-light {
+  @apply bg-slate-100 text-gray-700;
+}
+
+.main-container-editor-header-dark {
+  @apply bg-gray-700 text-white;
+}
+
+.main-container-editor-header-left {
+  @apply flex items-center gap-4;
+}
+
+.main-container-ai-assistant-button {
+  @apply flex cursor-pointer items-center justify-center px-4 py-1.5 h-8 text-sm bg-white border border-solid border-gray-300 rounded-md transition-all duration-300 ease-in-out hover:border-[#4096ff] hover:text-[#4096ff];
+}
+
+.main-container-ai-assistant-icon {
+  @apply size-8;
+}
+
+.main-container-editor-content {
+  @apply flex-1 overflow-hidden relative;
+}
+
+.main-container-panel-resize-handle-vertical {
+  @apply h-1 bg-gray-200 hover:bg-gray-300 transition-colors;
+}
+
+.main-container-panel-resize-handle-horizontal {
+  @apply w-1 bg-gray-200 hover:bg-gray-300 transition-colors;
+}
+
+.main-container-preview-panel {
+  @apply h-full flex flex-col;
+}
+
+.main-container-preview-header {
+  @apply border-b border-gray-200 px-4 py-2 text-sm font-medium flex justify-between items-center;
+}
+
+.main-container-preview-header-light {
+  @apply bg-slate-100 text-gray-700;
+}
+
+.main-container-preview-header-dark {
+  @apply bg-gray-700 text-white;
+}
+
+.main-container-preview-content {
+  @apply flex-1 p-4 overflow-auto;
+}
+
+.main-container-preview-text {
+  @apply text-gray-500 h-full;
+}
+
+.main-container-agreement {
+  @apply flex-1 h-full;
+}
diff --git a/src/tests/components/Navbar.test.tsx b/src/tests/components/Navbar.test.tsx
index 15237eb7..d48bc208 100644
--- a/src/tests/components/Navbar.test.tsx
+++ b/src/tests/components/Navbar.test.tsx
@@ -11,7 +11,7 @@ vi.mock("../../components/ToggleDarkMode", () => ({
 const renderNavbar = () => {
   render(
     <MemoryRouter>
-      <Navbar scrollToFooter={() => {}} />
+      <Navbar />
     </MemoryRouter>
   );
 };
diff --git a/tailwind.config.js b/tailwind.config.js
index 38069c4f..5b05e799 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,7 +1,9 @@
 import { scopedPreflightStyles, isolateInsideOfContainer } from 'tailwindcss-scoped-preflight';
-
 /** @type {import('tailwindcss').Config} */
 module.exports = {
+  corePlugins: {
+    preflight: false,
+  },
   content: [
     "./index.html",
     "./src/**/*.{js,ts,jsx,tsx}",