diff --git a/packages/app/package.json b/packages/app/package.json
index f473912e..4754f232 100644
--- a/packages/app/package.json
+++ b/packages/app/package.json
@@ -53,11 +53,11 @@
     "eslint-plugin-n": "^16.1.0",
     "eslint-plugin-prettier": "^5.0.0",
     "eslint-plugin-promise": "^6.1.1",
-    "stream-browserify": "^3.0.0",
     "prettier": "^3.0.3",
     "react-scripts": "5.0.1",
     "recoil-persist": "^5.1.0",
     "rollup-plugin-visualizer": "^5.12.0",
+    "stream-browserify": "^3.0.0",
     "typescript": "^5.2.2",
     "vite": "^5.2.11",
     "vite-plugin-pwa": "^0.20.0",
@@ -102,7 +102,7 @@
     "yaml": "^2.3.2"
   },
   "scripts": {
-    "start": "cross-env PORT=3001 vite",
+    "start": "cross-env PORT=3002 vite",
     "start:browser": "cross-env ./bin/watch-browser",
     "watch": "cross-env BROWSER=none yarn start",
     "build": "vite build",
diff --git a/packages/app/public/favicon.ico b/packages/app/public/favicon.ico
old mode 100644
new mode 100755
index a11777cc..a14acaa9
Binary files a/packages/app/public/favicon.ico and b/packages/app/public/favicon.ico differ
diff --git a/packages/app/public/logo192.png b/packages/app/public/logo192.png
old mode 100644
new mode 100755
index fc44b0a3..fd5360e0
Binary files a/packages/app/public/logo192.png and b/packages/app/public/logo192.png differ
diff --git a/packages/app/public/logo512.png b/packages/app/public/logo512.png
old mode 100644
new mode 100755
index a4e47a65..ef9e9321
Binary files a/packages/app/public/logo512.png and b/packages/app/public/logo512.png differ
diff --git a/packages/app/src/assets/covers/2601721286911_.pic.jpg b/packages/app/src/assets/covers/2601721286911_.pic.jpg
new file mode 100755
index 00000000..689304ce
Binary files /dev/null and b/packages/app/src/assets/covers/2601721286911_.pic.jpg differ
diff --git a/packages/app/src/assets/covers/2611721286921_.pic.jpg b/packages/app/src/assets/covers/2611721286921_.pic.jpg
new file mode 100755
index 00000000..f608bbae
Binary files /dev/null and b/packages/app/src/assets/covers/2611721286921_.pic.jpg differ
diff --git a/packages/app/src/assets/covers/2621721286928_.pic.jpg b/packages/app/src/assets/covers/2621721286928_.pic.jpg
new file mode 100755
index 00000000..91908f2e
Binary files /dev/null and b/packages/app/src/assets/covers/2621721286928_.pic.jpg differ
diff --git a/packages/app/src/assets/covers/2631721286934_.pic.jpg b/packages/app/src/assets/covers/2631721286934_.pic.jpg
new file mode 100755
index 00000000..28c687a6
Binary files /dev/null and b/packages/app/src/assets/covers/2631721286934_.pic.jpg differ
diff --git a/packages/app/src/assets/covers/2641721286942_.pic.jpg b/packages/app/src/assets/covers/2641721286942_.pic.jpg
new file mode 100755
index 00000000..2f4a7730
Binary files /dev/null and b/packages/app/src/assets/covers/2641721286942_.pic.jpg differ
diff --git a/packages/app/src/assets/covers/2651721286948_.pic.jpg b/packages/app/src/assets/covers/2651721286948_.pic.jpg
new file mode 100755
index 00000000..b3299a13
Binary files /dev/null and b/packages/app/src/assets/covers/2651721286948_.pic.jpg differ
diff --git a/packages/app/src/assets/covers/2661721286954_.pic.jpg b/packages/app/src/assets/covers/2661721286954_.pic.jpg
new file mode 100755
index 00000000..0dfbf691
Binary files /dev/null and b/packages/app/src/assets/covers/2661721286954_.pic.jpg differ
diff --git a/packages/app/src/assets/covers/2671721286964_.pic.jpg b/packages/app/src/assets/covers/2671721286964_.pic.jpg
new file mode 100755
index 00000000..711ca748
Binary files /dev/null and b/packages/app/src/assets/covers/2671721286964_.pic.jpg differ
diff --git a/packages/app/src/colors.css b/packages/app/src/colors.css
index 20b4244b..830195b4 100644
--- a/packages/app/src/colors.css
+++ b/packages/app/src/colors.css
@@ -29,6 +29,12 @@ html[data-color-mode="light"] {
 
   --audio-track-color: #88e461;
 
+  --choice-card-background-color: #dadada;
+  --choice-card-img-overlay-background-color-1: #f8f8f81a;
+  --choice-card-img-overlay-background-color-2: #f8f8f8cc;
+  --choice-card-img-overlay-background-color-3: #f8f8f8d9;
+  --choice-card-img-overlay-background-color-4: #f8f8f8;
+
   --canvas-background-color: #f8f8f8;
   --canvas-background-color-1: #f8f8f880;
   --canvas-background-color-2: #f8f8f840;
@@ -122,6 +128,12 @@ html[data-color-mode="dark"] {
 
   --audio-track-color: #89bb29;
 
+  --choice-card-background-color: #3d3d3d;
+  --choice-card-img-overlay-background-color-1: #2020201a;
+  --choice-card-img-overlay-background-color-2: #202020cc;
+  --choice-card-img-overlay-background-color-3: #202020d9;
+  --choice-card-img-overlay-background-color-4: #202020;
+
   --canvas-background-color: #202020;
   --canvas-background-color-1: #20202080;
   --canvas-background-color-2: #20202040;
diff --git a/packages/app/src/components/ActionBar.tsx b/packages/app/src/components/ActionBar.tsx
new file mode 100644
index 00000000..8bb26439
--- /dev/null
+++ b/packages/app/src/components/ActionBar.tsx
@@ -0,0 +1,351 @@
+import React, { FC, useState, forwardRef, useEffect } from 'react';
+
+import { setGlobalTheme } from '@atlaskit/tokens';
+import styled from '@emotion/styled';
+import { Unstable_Popup as Popup } from '@mui/base/Unstable_Popup';
+import FlashOffRoundedIcon from '@mui/icons-material/FlashOffRounded';
+import FlashOnRoundedIcon from '@mui/icons-material/FlashOnRounded';
+import TuneRoundedIcon from '@mui/icons-material/TuneRounded';
+import { css } from '@mui/material';
+import Switch from '@mui/material/Switch';
+import { useToggle } from 'ahooks';
+import clsx from 'clsx';
+import { useRecoilState, useRecoilValue } from 'recoil';
+
+import { useUpdateNodeBuiltInTypePairs } from '../apis/registry';
+import { useServer } from '../hooks/useServer';
+import { Theme, themeState } from '../state/settings';
+
+import { DropdownButton } from './DropdownButton';
+import { Icon } from './Icon';
+
+const ActionBarContainer = styled.div`
+  position: absolute;
+  top: 0;
+  // left: var(--header-height);
+  left: 0;
+  // width: 100%;
+  width: calc(100% - 20px);
+  height: var(--header-height);
+
+  display: flex;
+  justify-content: center;
+  box-shadow: 3px 1px 10px rgba(0, 0, 0, 0.5);
+  backdrop-filter: blur(1px);
+
+  padding: 0 10px;
+  background-color: var(--canvas-background-color);
+  color: var(--text-color);
+  z-index: 999;
+  font-size: 12px;
+  flex-direction: column;
+  gap: 4px;
+
+  .server-tab {
+    display: flex;
+    gap: 4px;
+    align-items: center;
+  }
+
+  .spacer {
+    flex-grow: 1;
+    width: 20px;
+  }
+
+  .encre-setting-bar {
+    cursor: pointer;
+    padding-inline: 5px;
+    width: 70px;
+    height: 28px;
+    display: flex;
+    align-items: center;
+    font-size: 14px;
+    font-weight: bold;
+    border-radius: 5px;
+    background-color: var(--primary-color);
+    color: #f0f0f0;
+  }
+
+  .graph-dropdown {
+    height: 28px;
+    display: flex;
+  }
+
+  .run-button {
+    cursor: pointer;
+    padding-inline: 8px;
+    height: 28px;
+    display: flex;
+    align-items: center;
+    font-size: 14px;
+    font-weight: bold;
+    border-radius: 5px;
+    background-color: var(--success-color);
+    color: var(--node-background-color);
+  }
+
+  #simple-popper {
+    z-index: 51;
+  }
+`;
+
+const PopupBody = styled.div`
+  width: max-content;
+  padding: 2px 8px;
+  margin: 8px 0;
+  border-radius: 8px;
+  border: 1px solid var(--node-background-color);
+  background-color: var(--node-background-color);
+  box-shadow: 0px 4px 8px rgb(0 0 0 / 0.7);
+  font-size: 12px;
+  font-weight: bold;
+  color: var(--text-color);
+  z-index: 1;
+
+  display: flex;
+  flex-direction: column;
+
+  & .row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    height: 28px;
+    width: 100%;
+  }
+
+  & hr {
+    border: none;
+    border-bottom: 1px solid var(--text-color);
+    margin: 5px 0;
+  }
+
+  .spacer {
+    flex-grow: 1;
+    width: 20px;
+  }
+
+  & .MuiSwitch-root {
+    height: 36px;
+  }
+
+  & .MuiSwitch-thumb {
+    width: 18px;
+    height: 18px;
+  }
+
+  & .MuiSwitch-switchBase,
+  & .MuiSwitch-switchBase.Mui-checked,
+  & .MuiSwitch-switchBase.Mui-disabled {
+    color: var(--node-foreground-color);
+
+    &:hover {
+      background-color: rgba(0, 0, 0, 0.05);
+    }
+  }
+
+  & .MuiSwitch-switchBase + .MuiSwitch-track,
+  & .MuiSwitch-switchBase.Mui-checked + .MuiSwitch-track,
+  & .MuiSwitch-switchBase.Mui-disabled + .MuiSwitch-track {
+    background-color: var(--node-foreground-color);
+  }
+`;
+
+function ThemeConfigurationRows() {
+  const [theme, setTheme] = useRecoilState(themeState);
+  const [themeModes, setThemeModes] = useState<string[]>(
+    theme === Theme.AUTO
+      ? ['Sync with system', 'Single Theme']
+      : ['Single Theme', 'Sync with system'],
+  );
+  const [isDayTheme, toggleIsDayTheme] = useToggle();
+
+  useEffect(() => {
+    if (themeModes[0] === 'Single Theme') {
+      setTheme(isDayTheme ? Theme.LIGHT : Theme.DARK);
+    } else {
+      setTheme(Theme.AUTO);
+    }
+  }, [themeModes, isDayTheme, toggleIsDayTheme, setTheme]);
+
+  useEffect(() => {
+    const colorTheme = document.documentElement.getAttribute('data-color-mode');
+
+    if (colorTheme === 'dark') {
+      toggleIsDayTheme.setLeft();
+    } else {
+      toggleIsDayTheme.setRight();
+    }
+  }, []);
+
+  useEffect(() => {
+    setGlobalTheme({
+      colorMode: theme,
+    });
+  }, [theme]);
+
+  const onThemeModeMenuClick = (e: React.MouseEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+
+    setThemeModes([themeModes[1], themeModes[0]]);
+  };
+
+  return (
+    <>
+      <div className="row">
+        <span>Theme Mode</span>
+      </div>
+      <div className="row">
+        <DropdownButton
+          name={themeModes[0]}
+          items={themeModes.slice(1).map((tm) => ({ name: tm }))}
+          showIcon={false}
+          styling={{
+            width: 120,
+            fontSize: 12,
+            borderColor: 'var(--node-foreground-color)',
+            activeBorderColor: 'var(--node-foreground-color)',
+            backgroundColor: 'var(--node-foreground-color)',
+          }}
+          onDropDownMenuClick={onThemeModeMenuClick}
+        />
+      </div>
+      <div className="row">
+        <span>Night</span>
+        <Switch
+          inputProps={{ 'aria-label': 'Color switch demo' }}
+          onClick={(e) => {
+            if (e.button === 0) {
+              toggleIsDayTheme.toggle();
+            }
+          }}
+          {...{ disabled: themeModes[0] === 'Sync with system' }}
+          {...{ checked: isDayTheme }}
+        />
+        <span>Day</span>
+      </div>
+    </>
+  );
+}
+
+function ConfigurationPopup() {
+  const [anchor, setAnchor] = React.useState<null | HTMLElement>(null);
+
+  const handleClick = (event: React.MouseEvent<HTMLElement>) => {
+    setAnchor(anchor ? null : event.currentTarget);
+  };
+
+  const open = Boolean(anchor);
+  const id = open ? 'configuration-popper' : undefined;
+
+  return (
+    <div>
+      <div onClick={handleClick}>
+        <Icon
+          icon={TuneRoundedIcon}
+          width={'28px'}
+          height={'28px'}
+          fontSize={'18px'}
+          additionalStyles={css`
+            cursor: pointer;
+            border-radius: 5px;
+            color: var(--text-color);
+            background-color: var(--node-background-color);
+          `}
+        />
+      </div>
+      <Popup
+        id={id}
+        open={open}
+        anchor={anchor}
+        placement={'bottom-end'}
+        disablePortal
+        strategy="fixed"
+        slotProps={{ root: { style: { zIndex: 51 } } }}
+      >
+        <PopupBody>
+          <ThemeConfigurationRows />
+          <hr />
+        </PopupBody>
+      </Popup>
+    </div>
+  );
+}
+
+export const ActionBar: FC = () => {
+  const { updateNodeBuiltInTypePairs } = useUpdateNodeBuiltInTypePairs();
+  const { serverState: server, connect } = useServer({
+    onConnect: async () => {
+      await updateNodeBuiltInTypePairs();
+    },
+  });
+
+  const [url, serUrl] = useState<string>('http://localhost:5127');
+
+  return (
+    <ActionBarContainer>
+      <div className={clsx('server-tab')}>
+        <div>
+          {server.url !== '' && (
+            <Icon
+              icon={FlashOnRoundedIcon}
+              width={'28px'}
+              height={'28px'}
+              fontSize={'18px'}
+              additionalStyles={css`
+                cursor: pointer;
+                border-radius: 5px;
+                color: var(--node-background-color);
+                background-color: var(--success-color);
+              `}
+            />
+          )}
+          {server.url === '' && (
+            <Icon
+              icon={FlashOffRoundedIcon}
+              width={'28px'}
+              height={'28px'}
+              fontSize={'18px'}
+              additionalStyles={css`
+                cursor: pointer;
+                border-radius: 5px;
+                color: var(--node-background-color);
+                background-color: var(--warn-color);
+              `}
+              onClick={() => connect(url)}
+            />
+          )}
+        </div>
+
+        <div className={clsx('encre-setting-bar')}>
+          <span>Encre</span>
+        </div>
+        <div className="graph-dropdown">
+          <DropdownButton
+            name={'Graph 1'}
+            items={[
+              {
+                name: '  ',
+              },
+            ]}
+            showIcon={false}
+            styling={{
+              width: 100,
+              fontSize: 13,
+              borderColor: 'var(--primary-color)',
+              activeBorderColor: 'var(--primary-color)',
+            }}
+          />
+        </div>
+
+        <div className="spacer"></div>
+
+        <ConfigurationPopup />
+
+        <div className={clsx('run-button')}>
+          <span>Run</span>
+        </div>
+      </div>
+    </ActionBarContainer>
+  );
+};
diff --git a/packages/app/src/components/AppBuilder.tsx b/packages/app/src/components/AppBuilder.tsx
new file mode 100644
index 00000000..71b54ffb
--- /dev/null
+++ b/packages/app/src/components/AppBuilder.tsx
@@ -0,0 +1,409 @@
+import React, { FC } from 'react';
+
+import styled from '@emotion/styled';
+import AutoAwesomeRoundedIcon from '@mui/icons-material/AutoAwesomeRounded';
+
+import Cover1 from '../assets/covers/2601721286911_.pic.jpg';
+import Cover2 from '../assets/covers/2611721286921_.pic.jpg';
+import Cover3 from '../assets/covers/2621721286928_.pic.jpg';
+import Cover4 from '../assets/covers/2631721286934_.pic.jpg';
+import Cover5 from '../assets/covers/2641721286942_.pic.jpg';
+
+import { AppBuilderActionButton } from './AppBuilderActionButton';
+import { AppBuilderCard } from './AppBuilderCard';
+import { Icon } from './Icon';
+
+const AppBuilderContainer = styled.div`
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+
+  background-color: var(--canvas-background-color);
+  border-left: 1px solid var(--text-disabled-color);
+`;
+
+const SearchContainer = styled.div`
+  margin-top: var(--header-height);
+  width: 100%;
+  height: 40vh;
+
+  .search-panel-container {
+    font-size: 1rem;
+    padding: 0 1.75rem;
+    margin: auto;
+    height: 100%;
+    z-index: 2;
+  }
+
+  .search-panel {
+    display: flex;
+    flex: 1;
+    margin-left: auto;
+    margin-right: auto;
+    gap: 1rem;
+    font-size: 1rem;
+    height: 100%;
+  }
+
+  .search-box-container {
+    position: relative;
+    display: flex;
+    height: 100%;
+    max-width: 100%;
+    flex: 1;
+    flex-direction: column;
+    justify-content: flex-end;
+  }
+
+  .search-box-wrapper {
+    display: flex;
+    width: 100%;
+    align-items: center;
+  }
+
+  .search-box {
+    display: flex;
+    width: 100%;
+    flex-direction: column;
+    gap: 0.375rem;
+    border-radius: 26px;
+    padding: 0.375rem;
+    background-color: var(--node-foreground-color);
+    border: 2px solid var(--text-color);
+    transition: color 0.3s ease;
+  }
+
+  .search-flex {
+    display: flex;
+    align-items: flex-end;
+    gap: 0.375rem;
+  }
+
+  .search-textarea-wrapper {
+    display: flex;
+    min-width: 0;
+    flex: 1;
+    flex-direction: column;
+  }
+
+  @media (min-width: 768px) {
+    padding-top: 0;
+    border-color: transparent;
+    width: calc(100% - 0.5rem);
+
+    .search-panel-container {
+      padding: 0 1.25rem;
+    }
+
+    .search-panel {
+      max-width: 48rem;
+      gap: 1.25rem;
+    }
+
+    .search-flex {
+      gap: 0.5rem;
+    }
+  }
+
+  @media (min-width: 1024px) {
+    .search-panel-container {
+      padding: 0 1.25rem;
+    }
+
+    .search-panel {
+      max-width: 40rem;
+      gap: 1.5rem;
+    }
+  }
+
+  @media (min-width: 1280px) {
+    .search-panel-container {
+      padding: 0 1.5rem;
+    }
+
+    .search-panel {
+      max-width: 48rem;
+    }
+  }
+
+  @media (prefers-color-scheme: dark) {
+    border-color: var(--text-color);
+
+    @media (min-width: 768px) {
+      border-color: transparent;
+    }
+  }
+`;
+
+const UserActionContainer = styled.div`
+  width: 100%;
+  height: calc(100vh - 40vh - var(--header-height));
+
+  .flex-row {
+    display: flex;
+    flex: 1;
+    margin-left: auto;
+    margin-right: auto;
+    gap: 1rem;
+    font-size: 1rem;
+    height: 100%;
+    padding-bottom: 2rem;
+    overflow-x: scroll;
+  }
+
+  @media (min-width: 768px) {
+    .flex-row {
+      max-width: 48rem;
+      gap: 1.25rem;
+    }
+  }
+
+  @media (min-width: 1024px) {
+    .flex-row {
+      max-width: 40rem;
+      gap: 1.5rem;
+    }
+  }
+
+  @media (min-width: 1280px) {
+    .flex-row {
+      max-width: 48rem;
+    }
+  }
+`;
+
+const SearchBox = styled.textarea`
+  margin: 0;
+  resize: none;
+  background-color: transparent;
+  padding-left: 0;
+  padding-right: 0;
+  color: var(--text-color);
+  max-height: 25vh;
+  height: 100%;
+  padding: 1rem 0.75rem;
+  width: 100%;
+  border: none;
+  outline: none;
+  font-size: 1rem;
+
+  @media (min-height: 208rem) {
+    max-height: 52rem;
+  }
+`;
+
+const SendButton = styled.button`
+  margin-bottom: 0.25rem;
+  margin-inline-end: 0.25rem;
+  display: flex;
+  height: 2.5rem;
+  width: 2.5rem;
+  align-items: center;
+  justify-content: center;
+  border: 2px solid var(--text-color);
+  border-radius: 9999px;
+  background-color: var(--text-color);
+  color: var(--node-foreground-color);
+  transition:
+    color 0.1s ease,
+    background-color 0.1s ease;
+  cursor: pointer;
+
+  &:hover {
+    opacity: 0.7;
+  }
+
+  &:focus-visible {
+    outline: none;
+  }
+
+  &:disabled {
+    border: 2px solid var(--text-disabled-color);
+    background-color: var(--text-disabled-color);
+    color: var(--node-background-color);
+    opacity: 1;
+  }
+`;
+
+const QuoteArea = styled.div`
+  display: flex;
+  flex-direction: column;
+  border-color: var(--text-color);
+  border-style: solid;
+  border-width: 0;
+  overflow: hidden;
+  border-radius: 20px 20px 0 0;
+  background-color: var(--node-background-color);
+  border-bottom-left-radius: 0.5rem;
+  border-bottom-right-radius: 0.5rem;
+
+  & > * + * {
+    border-top-width: 1px;
+  }
+
+  .quote-row {
+    display: flex;
+    align-items: flex-start;
+    padding: 0.625rem 0.375rem 0.625rem 0.75rem;
+    gap: 1rem;
+    font-size: 0.875rem;
+    color: var(--text-color);
+  }
+
+  .quote-text {
+    flex: 1;
+    display: -webkit-box;
+    -webkit-line-clamp: 3;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    padding-top: 0.125rem;
+    padding-bottom: 0.125rem;
+  }
+`;
+
+const SearchNote = styled.div`
+  position: relative;
+  padding: 0.5rem 0.5rem;
+  text-align: center;
+  font-size: 0.75rem;
+  color: var(--text-color);
+`;
+
+const SearchPrompt = styled.div`
+  position: absolute;
+  top: var(--header-height);
+  left: 0;
+  height: 19vh;
+  width: 100%;
+  padding: 0.5rem 0.5rem;
+  text-align: center;
+  font-size: 1.5rem;
+  color: var(--text-color);
+
+  display: flex;
+  align-items: flex-end;
+  justify-content: center;
+  z-index: 1;
+`;
+
+const CardContainer = styled.div`
+  display: flex;
+  gap: 0.75rem;
+  padding: 0 1.25rem;
+  margin-top: 4rem;
+`;
+
+const ActionContainer = styled.div`
+  display: flex;
+  gap: 0.75rem;
+  padding: 0 1.25rem;
+  margin-top: 1.25rem;
+`;
+
+export const AppBuilder: FC = () => {
+  // TODO: remove this
+  const dummyDescription =
+    'Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque \
+  laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi \
+  architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas \
+  sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione \
+  voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit \
+  amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut \
+  labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis \
+  nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea \
+  commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit \
+  esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas \
+  nulla pariatur?';
+
+  return (
+    <AppBuilderContainer>
+      <SearchContainer>
+        <SearchPrompt>
+          <span>What would you like to build today?</span>
+        </SearchPrompt>
+        <div className="search-panel-container">
+          <div className="search-panel">
+            <div className="search-box-container">
+              <div className="search-box-wrapper">
+                <div className="search-box">
+                  {/* <QuoteArea>
+                  <div className="quote-row">
+                    <span className="quote-text">
+                      Something here
+                    </span>
+                  </div>
+                </QuoteArea> */}
+                  <div className="search-flex">
+                    <div className="search-textarea-wrapper">
+                      <SearchBox
+                        tabIndex={0}
+                        dir="auto"
+                        rows={1}
+                        placeholder="Message ChatGPT"
+                        style={{
+                          height: '40px',
+                          overflowY: 'hidden',
+                        }}
+                      />
+                    </div>
+                    <SendButton>
+                      <Icon
+                        icon={AutoAwesomeRoundedIcon}
+                        width={'1.35rem'}
+                        height={'1.35rem'}
+                        fontSize={'1.35rem'}
+                      />
+                    </SendButton>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <SearchNote>
+            <span>ChatGPT can make mistakes.</span>
+          </SearchNote>
+        </div>
+      </SearchContainer>
+      <UserActionContainer>
+        <CardContainer>
+          <div className="flex-row">
+            <AppBuilderCard
+              cover={Cover1}
+              title={'Chat App'}
+              description={dummyDescription}
+            />
+            <AppBuilderCard
+              cover={Cover2}
+              title={'Paragraphs'}
+              description={dummyDescription}
+            />
+            <AppBuilderCard
+              cover={Cover3}
+              title={'Translation'}
+              description={dummyDescription}
+            />
+            <AppBuilderCard
+              cover={Cover4}
+              title={'Summary'}
+              description={dummyDescription}
+            />
+            <AppBuilderCard
+              cover={Cover5}
+              title={'Your Own App'}
+              description={dummyDescription}
+            />
+          </div>
+        </CardContainer>
+        <ActionContainer>
+          <div className="flex-row" style={{ justifyContent: 'flex-end' }}>
+            <AppBuilderActionButton name={'More Apps'} />
+            {/* <AppBuilderActionButton name={'Re-ask'} />
+          <AppBuilderActionButton name={'Proceed'} /> */}
+          </div>
+        </ActionContainer>
+      </UserActionContainer>
+    </AppBuilderContainer>
+  );
+};
diff --git a/packages/app/src/components/AppBuilderActionButton.tsx b/packages/app/src/components/AppBuilderActionButton.tsx
new file mode 100644
index 00000000..9659869f
--- /dev/null
+++ b/packages/app/src/components/AppBuilderActionButton.tsx
@@ -0,0 +1,50 @@
+import React, { FC } from 'react';
+
+import styled from '@emotion/styled';
+
+import { AppBuilderActionButtonProps } from '../types/appbuilder.type';
+
+const ActionButton = styled.button`
+  cursor: pointer;
+  padding-inline: 5px;
+  width: fit-content;
+  height: 34px;
+  display: flex;
+  border: 0;
+  align-items: center;
+  font-size: 0.9rem;
+  font-weight: bold;
+  border-radius: 5px;
+  background-color: var(--text-color);
+  color: var(--node-foreground-color);
+
+  &:hover {
+    opacity: 0.7;
+  }
+
+  &:focus-visible {
+    outline: none;
+  }
+
+  &:disabled {
+    border: 2px solid var(--text-disabled-color);
+    background-color: var(--text-disabled-color);
+    color: var(--node-background-color);
+    opacity: 1;
+  }
+
+  .space {
+    width: 25px;
+  }
+`;
+
+export const AppBuilderActionButton: FC<AppBuilderActionButtonProps> = ({
+  name,
+}) => {
+  return (
+    <ActionButton>
+      <span>{name}</span>
+      <span className="space" />
+    </ActionButton>
+  );
+};
diff --git a/packages/app/src/components/AppBuilderBar.tsx b/packages/app/src/components/AppBuilderBar.tsx
new file mode 100644
index 00000000..abfaaddd
--- /dev/null
+++ b/packages/app/src/components/AppBuilderBar.tsx
@@ -0,0 +1,28 @@
+import React, { FC } from 'react';
+
+import styled from '@emotion/styled';
+
+const AppBuilderBarContainer = styled.div`
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: calc(100% - 20px);
+  height: var(--header-height);
+
+  display: flex;
+  justify-content: center;
+  box-shadow: 3px 1px 10px rgba(0, 0, 0, 0.5);
+  backdrop-filter: blur(1px);
+
+  padding: 0 10px;
+  background-color: var(--canvas-background-color);
+  color: var(--text-color);
+  z-index: 999;
+  font-size: 12px;
+  flex-direction: column;
+  gap: 4px;
+`;
+
+export const AppBuilderBar: FC = () => {
+  return <AppBuilderBarContainer></AppBuilderBarContainer>;
+};
diff --git a/packages/app/src/components/AppBuilderCard.tsx b/packages/app/src/components/AppBuilderCard.tsx
new file mode 100644
index 00000000..1fcbb789
--- /dev/null
+++ b/packages/app/src/components/AppBuilderCard.tsx
@@ -0,0 +1,113 @@
+import React, { FC } from 'react';
+
+import styled from '@emotion/styled';
+
+import Cover1 from '../assets/covers/2601721286911_.pic.jpg';
+import { AppBuilderCardProps } from '../types/appbuilder.type';
+
+const AppBuilderCardContainer = styled.div`
+  display: flex;
+  border-radius: 17px;
+  flex-direction: column;
+  gap: 0.75rem;
+  padding: 0.75rem;
+  border: 2px solid var(--choice-card-background-color);
+  background-color: var(--choice-card-background-color);
+  color: var(--text-color);
+  position: relative;
+  width: fit-content;
+  user-select: none;
+  cursor: pointer;
+  transition: border 0.2s ease;
+
+  .card-title {
+    height: 1.25rem;
+    font-size: 1rem;
+    font-weight: 700;
+  }
+
+  .card-body {
+    overflow: hidden;
+    border-radius: calc(17px - 0.75rem / 2);
+    background-color: var(--text-color);
+    width: 158px;
+    height: 158px;
+  }
+
+  .image {
+    display: block;
+    width: 100%;
+    height: auto;
+    transition: transform 0.5s ease;
+
+    &:hover {
+      transform: scale(1.05);
+    }
+  }
+
+  .overlay {
+    position: absolute;
+    top: calc(0.75rem + 0.75rem + 1.25rem);
+    bottom: 0.75rem;
+    left: 0.75rem;
+    right: 0.75rem;
+    border-radius: calc(17px - 0.75rem / 2);
+    height: inherit;
+    width: inherit;
+    opacity: 0;
+    transition: 0.2s ease;
+    background: linear-gradient(
+      to top,
+      var(--choice-card-img-overlay-background-color-1) 0%,
+      var(--choice-card-img-overlay-background-color-2) 50%,
+      var(--choice-card-img-overlay-background-color-3) 75%,
+      var(--choice-card-img-overlay-background-color-4) 100%
+    );
+    display: flex;
+    padding: 10px;
+    box-sizing: border-box;
+    user-select: none;
+  }
+
+  &:hover {
+    border: 2px solid var(--text-color);
+
+    .overlay {
+      opacity: 1;
+    }
+  }
+
+  .overlay .text {
+    color: var(--text-color);
+    font-size: 12px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-line-clamp: 8; /* Number of lines you want to show */
+    -webkit-box-orient: vertical;
+  }
+`;
+
+export const AppBuilderCard: FC<AppBuilderCardProps> = ({
+  cover,
+  title,
+  description = '',
+}) => {
+  return (
+    <AppBuilderCardContainer>
+      <div className="card-title">{title}</div>
+      <div className="card-body">
+        <img
+          src={cover}
+          width={158}
+          height={158}
+          crossOrigin="anonymous"
+          className="image"
+        />
+        <div className="overlay">
+          <span className="text">{description}</span>
+        </div>
+      </div>
+    </AppBuilderCardContainer>
+  );
+};
diff --git a/packages/app/src/components/EncreStudio.tsx b/packages/app/src/components/EncreStudio.tsx
index adc1ce2c..6d0e53d4 100644
--- a/packages/app/src/components/EncreStudio.tsx
+++ b/packages/app/src/components/EncreStudio.tsx
@@ -1,17 +1,19 @@
 /** @jsxImportSource @emotion/react */
 import React, { FC, useCallback, useState } from 'react';
 
-import { setGlobalTheme } from '@atlaskit/tokens';
 import { css } from '@emotion/react';
-import clsx from 'clsx';
-import { useRecoilState, useRecoilValue } from 'recoil';
+import styled from '@emotion/styled';
 
-import { useUpdateNodeBuiltInTypePairs } from '../apis/registry';
-import { useServerURL } from '../apis/server';
-import { serverURLState, themeState } from '../state/settings';
+import { SvgLogo } from '../icons/logo';
 
+import { ActionBar } from './ActionBar';
+import { AppBuilder } from './AppBuilder';
+import { AppBuilderBar } from './AppBuilderBar';
+import { Iframe } from './Iframe';
 import { NodeGraphBuilder } from './NodeGraphBuilder';
-// import { send } from 'internal/src/fetch';
+import { Pane } from './Pane';
+import { SideToolBar } from './SideToolBar';
+import { SplitPane } from './SplitPane';
 
 const styles = css`
   overflow: hidden;
@@ -19,49 +21,94 @@ const styles = css`
   width: 100vw;
 `;
 
+const SideBarContainer = styled.div`
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: var(--header-height);
+  height: 100vh;
+  background-color: var(--canvas-background-color);
+  border-right: 1px solid var(--text-disabled-color);
+  z-index: 1000;
+`;
+
+const LogoContainer = styled.div`
+  position: relative;
+  width: 100%;
+  height: var(--header-height);
+  background-color: var(--canvas-background-color);
+`;
+
 export const EncreStudio: FC = () => {
-  const theme = useRecoilValue(themeState);
+  const [sizes, setSizes] = useState<(string | number)[]>([400, 'auto']);
 
-  setGlobalTheme({
-    colorMode: theme,
-  });
+  // TODO: remove this
+  const [stage, setStage] = useState<number>(0);
 
   return (
     <div css={styles}>
-      <ActionPanel />
-      <NodeGraphBuilder />
+      <SideBarContainer>
+        <LogoContainer>
+          <SvgLogo
+            width={38}
+            height={38}
+            style={{ color: 'var(--primary-color)' }}
+          />
+        </LogoContainer>
+        <SideToolBar />
+      </SideBarContainer>
+      <div
+        style={{
+          position: 'fixed',
+          top: 0,
+          left: 'var(--header-height)',
+          width: 'calc(100vw - var(--header-height))',
+          height: '100vh',
+        }}
+      >
+        <SplitPane split="vertical" sizes={sizes} onSizesChange={setSizes}>
+          <Pane minSize={400}>
+            <ActionBar />
+            <NodeGraphBuilder />
+          </Pane>
+          <div>
+            {stage === 0 && (
+              <>
+                <AppBuilderBar />
+                <AppBuilder />
+              </>
+            )}
+            {stage === 1 && (
+              <>
+                <AppBuilderBar />
+                <div
+                  style={{
+                    paddingTop: 'var(--header-height)',
+                    height: 'calc(100vh - var(--header-height))',
+                    display: 'flex',
+                  }}
+                >
+                  <PopupButton />                
+                </div>
+              </>
+            )}
+          </div>
+        </SplitPane>
+      </div>
     </div>
   );
 };
 
-const actionStyles = css`
-  position: absolute;
-  top: 0px;
-  left: auto;
-  right: auto;
-  padding: 10px 20px;
-  border-radius: 5px;
-  background-color: rgba(255, 255, 255, 0.03);
-  color: var(--text-color);
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
-  z-index: 99999;
-  font-size: 12px;
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-`;
-
-export const ActionPanel: FC = () => {
-  const { setServerURL } = useServerURL();
-  const { updateNodeBuiltInTypePairs } = useUpdateNodeBuiltInTypePairs();
-
-  const onClickSend = async (e: React.MouseEvent) => {
-    await setServerURL('http://localhost:5127');
-    await updateNodeBuiltInTypePairs();
+const PopupButton = () => {
+  const openPopup = () => {
+    const newWindow = window.open('https://www.figma.com/proto/bPCoTdsdoNemAdCxvhJU2K/UI?node-id=768-1602&t=G3xEgguiNbMi8DbC-1&scaling=min-zoom&content-scaling=fixed&page-id=768%3A1601&starting-point-node-id=768%3A1602', 'Example App', 'width=800,height=600');
+    if (newWindow) {
+      // Perform further actions with newWindow if necessary
+      newWindow.focus();
+    }
   };
+
   return (
-    <div css={actionStyles}>
-      <button onClick={onClickSend}>Connect</button>
-    </div>
+    <button style={{ width: 100, height: 50 }} onClick={openPopup}>Open Popup</button>
   );
 };
diff --git a/packages/app/src/components/Iframe.tsx b/packages/app/src/components/Iframe.tsx
new file mode 100644
index 00000000..5ba7fa31
--- /dev/null
+++ b/packages/app/src/components/Iframe.tsx
@@ -0,0 +1,56 @@
+import React, { FC } from 'react';
+
+import styled from '@emotion/styled';
+
+const IframeContainer = styled.div`
+  position: relative;
+  -webkit-box-flex: 1;
+  -webkit-flex-grow: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
+  overflow: hidden;
+  color-scheme: dark light;
+  background: Canvas;
+  color: CanvasText;
+
+  .result-iframe {
+    border: 0;
+    background: Canvas;
+    color: CanvasText;
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 1;
+  }
+
+  iframe {
+    overflow-clip-margin: content-box !important;
+    border-width: 2px;
+    border-style: inset;
+    border-color: initial;
+    border-image: initial;
+    overflow: clip !important;
+  }
+`;
+
+export const Iframe: FC = () => {
+  return (
+    <IframeContainer>
+      <iframe
+        id="result"
+        className="result-iframe"
+        src="http://localhost:5127/"
+        sandbox="allow-scripts allow-same-origin allow-presentation allow-forms allow-popups allow-downloads allow-storage-access-by-user-activation"
+        frameBorder="0"
+        draggable
+        referrerPolicy="no-referrer"
+        allow="cross-origin-isolated"
+        aha-samesite="true"
+        data-iframe-will-auto-focus="1"
+        allowFullScreen
+      ></iframe>
+    </IframeContainer>
+  );
+};
diff --git a/packages/app/src/components/NodeCanvas.tsx b/packages/app/src/components/NodeCanvas.tsx
index 616ce9ff..16702791 100644
--- a/packages/app/src/components/NodeCanvas.tsx
+++ b/packages/app/src/components/NodeCanvas.tsx
@@ -875,14 +875,14 @@ export const NodeCanvas: FC<NodeCanvasProps> = ({
 
 const debugStyles = css`
   position: absolute;
-  top: 30px;
-  left: 30px;
+  top: calc(15px + var(--header-height));
+  left: calc(15px);
   padding: 10px 20px;
   border-radius: 5px;
   background-color: rgba(255, 255, 255, 0.03);
   color: var(--text-color);
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
-  z-index: 99999;
+  z-index: 99;
   font-size: 12px;
   display: flex;
   flex-direction: column;
diff --git a/packages/app/src/components/NodeGraphBuilder.tsx b/packages/app/src/components/NodeGraphBuilder.tsx
index 993153f4..2d4a5212 100644
--- a/packages/app/src/components/NodeGraphBuilder.tsx
+++ b/packages/app/src/components/NodeGraphBuilder.tsx
@@ -48,7 +48,7 @@ export const NodeGraphBuilder: FC = () => {
   const onCommentsSelect = useStableCallback(
     (newComments: GraphComment[], isMulti?: boolean) => {
       if (isMulti) {
-        setSelectingCommentIds((commentIds: string[]) => [
+        setSelectingCommentIds((commentIds: RecordId[]) => [
           ...new Set([...commentIds, ...newComments.map((c) => c.id)]),
         ]);
       } else {
@@ -74,22 +74,21 @@ export const NodeGraphBuilder: FC = () => {
   );
 
   return (
-    // <ErrorBoundary
-    //   fallback={<div>There is something wrong in NodeCanvas...</div>}
-    // >
-
-    // </ErrorBoundary>
-    <NodeCanvas
-      nodes={nodes}
-      connections={connections}
-      comments={comments}
-      onNodesChange={onNodesChange}
-      onCommentsChange={onCommentsChange}
-      onConnectionsChange={setConnections}
-      onNodesSelect={onNodesSelect}
-      onCommentsSelect={onCommentsSelect}
-      onWiresSelect={onWiresSelect}
-      onContextMenuSelect={contextMenuNodeGraphHandler}
-    />
+    <ErrorBoundary
+      fallback={<div>There is something wrong in NodeCanvas...</div>}
+    >
+      <NodeCanvas
+        nodes={nodes}
+        connections={connections}
+        comments={comments}
+        onNodesChange={onNodesChange}
+        onCommentsChange={onCommentsChange}
+        onConnectionsChange={setConnections}
+        onNodesSelect={onNodesSelect}
+        onCommentsSelect={onCommentsSelect}
+        onWiresSelect={onWiresSelect}
+        onContextMenuSelect={contextMenuNodeGraphHandler}
+      />
+    </ErrorBoundary>
   );
 };
diff --git a/packages/app/src/components/Pane.tsx b/packages/app/src/components/Pane.tsx
new file mode 100644
index 00000000..1ee3a45e
--- /dev/null
+++ b/packages/app/src/components/Pane.tsx
@@ -0,0 +1,17 @@
+import React, { FC } from 'react';
+
+import { PaneProps } from '../types/splitpane.type';
+
+export const Pane: FC<PaneProps> = ({
+  children,
+  style,
+  className,
+  role,
+  title,
+}) => {
+  return (
+    <div role={role} title={title} className={className} style={style}>
+      {children}
+    </div>
+  );
+};
diff --git a/packages/app/src/components/Sash.tsx b/packages/app/src/components/Sash.tsx
new file mode 100644
index 00000000..e81ef6e4
--- /dev/null
+++ b/packages/app/src/components/Sash.tsx
@@ -0,0 +1,81 @@
+import React, { FC, useRef, useState } from 'react';
+
+import { useLatest } from 'ahooks';
+import clsx from 'clsx';
+
+import { SashProps } from '../types/splitpane.type';
+
+export const Sash: FC<SashProps> = ({
+  className,
+  render,
+  onStartDrag,
+  onDragging,
+  onEndDrag,
+  ...otherProps
+}) => {
+  const timeout = useRef<number | null>(null);
+  const [active, setActive] = useState<boolean>(false);
+  const [isDragging, setIsDragging] = useState<boolean>(false);
+
+  const onDragStartLatest = useLatest(onStartDrag);
+  const onDraggingLatest = useLatest(onDragging);
+  const onDragEndLatest = useLatest(onEndDrag);
+
+  const onMouseMoveRef = useRef<(e: React.MouseEvent) => void>(() => {});
+  const onMouseUpRef = useRef<(e: React.MouseEvent) => void>(() => {});
+
+  const onMouseDown = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    onDragStartLatest.current?.(e);
+
+    onMouseMoveRef.current = (event) => onDraggingLatest.current?.(event);
+    onMouseUpRef.current = (event) => onMouseUp(event);
+
+    setIsDragging(true);
+
+    window.addEventListener('mousemove', onMouseMoveRef.current as any, {
+      passive: true,
+      capture: true,
+    });
+
+    window.addEventListener('mouseup', onMouseUpRef.current as any, {
+      capture: true,
+    });
+  };
+
+  const onMouseUp = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    onDragEndLatest.current?.(e);
+
+    setIsDragging(false);
+
+    window.removeEventListener('mousemove', onMouseMoveRef.current as any, {
+      capture: true,
+    });
+
+    window.removeEventListener('mouseup', onMouseUpRef.current as any, {
+      capture: true,
+    });
+  };
+
+  return (
+    <div
+      className={clsx('sash', className)}
+      {...otherProps}
+      onMouseEnter={() => {
+        timeout.current = window.setTimeout(() => {
+          setActive(true);
+        }, 150);
+      }}
+      onMouseLeave={() => {
+        if (timeout.current) {
+          setActive(false);
+          window.clearTimeout(timeout.current);
+        }
+      }}
+      onMouseDown={onMouseDown}
+    >
+      {render(isDragging || active)}
+    </div>
+  );
+};
diff --git a/packages/app/src/components/SashContent.tsx b/packages/app/src/components/SashContent.tsx
new file mode 100644
index 00000000..d6dc74c1
--- /dev/null
+++ b/packages/app/src/components/SashContent.tsx
@@ -0,0 +1,32 @@
+import React, { FC } from 'react';
+
+import styled from '@emotion/styled';
+import clsx from 'clsx';
+
+import { SashContentProps } from '../types/splitpane.type';
+
+const SashContentContainer = styled.div`
+  width: 100%;
+  height: 100%;
+
+  &.vscode {
+    &.active {
+      background-color: var(--primary-color);
+    }
+  }
+`;
+
+export const SashContent: FC<SashContentProps> = ({
+  className,
+  children,
+  active,
+  type,
+}) => {
+  return (
+    <SashContentContainer
+      className={clsx('split-sash-content', { active }, type, className)}
+    >
+      {children}
+    </SashContentContainer>
+  );
+};
diff --git a/packages/app/src/components/SideToolBar.tsx b/packages/app/src/components/SideToolBar.tsx
new file mode 100644
index 00000000..b6436149
--- /dev/null
+++ b/packages/app/src/components/SideToolBar.tsx
@@ -0,0 +1,121 @@
+import React, { FC } from 'react';
+
+import styled from '@emotion/styled';
+import { Unstable_Popup as Popup } from '@mui/base/Unstable_Popup';
+import AccountTreeTwoToneIcon from '@mui/icons-material/AccountTreeTwoTone';
+import InsertDriveFileOutlinedIcon from '@mui/icons-material/InsertDriveFileOutlined';
+import SearchRoundedIcon from '@mui/icons-material/SearchRounded';
+import WidgetsRoundedIcon from '@mui/icons-material/WidgetsRounded';
+import clsx from 'clsx';
+
+import { Icon } from './Icon';
+
+const PopupBody = styled.div`
+  width: max-content;
+  padding: 2px 8px;
+  margin: 0 5px;
+  border-radius: 8px;
+  border: 1px solid var(--text-disabled-color);
+  background-color: var(--node-background-color);
+  box-shadow: 0px 4px 8px rgb(0 0 0 / 0.2);
+  font-size: 12px;
+  font-weight: bold;
+  color: var(--text-color);
+  z-index: 1;
+`;
+
+const SideToolBarContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 15px 0;
+  gap: 15px;
+
+  .tool {
+    color: var(--text-disabled-color);
+    cursor: pointer;
+
+    &:hover {
+      color: var(--text-color);
+    }
+
+    &.active {
+      color: var(--text-color);
+    }
+  }
+`;
+
+function ToolPopup({
+  name,
+  children,
+}: { name: string } & React.PropsWithChildren) {
+  const [anchor, setAnchor] = React.useState<null | HTMLElement>(null);
+
+  const open = Boolean(anchor);
+  const id = open ? `${name}-tool-popper` : undefined;
+
+  return (
+    <div>
+      <div
+        onMouseOver={(e) => setAnchor(e.currentTarget)}
+        onMouseOut={() => setAnchor(null)}
+      >
+        {children}
+      </div>
+      <Popup
+        id={id}
+        open={open}
+        anchor={anchor}
+        placement={'right'}
+        disablePortal
+        strategy="fixed"
+        slotProps={{ root: { style: { zIndex: 51 } } }}
+      >
+        <PopupBody>{name}</PopupBody>
+      </Popup>
+    </div>
+  );
+}
+
+export const SideToolBar: FC = () => {
+  return (
+    <SideToolBarContainer>
+      <ToolPopup name="Explorer">
+        <Icon
+          icon={InsertDriveFileOutlinedIcon}
+          height="24px"
+          width="24px"
+          fontSize="24px"
+          className={clsx('tool')}
+        />
+      </ToolPopup>
+      <ToolPopup name="Workflow Editor">
+        <Icon
+          icon={AccountTreeTwoToneIcon}
+          height="24px"
+          width="24px"
+          fontSize="24px"
+          className={clsx('tool', 'active')}
+        />
+      </ToolPopup>
+      <ToolPopup name="Search">
+        <Icon
+          icon={SearchRoundedIcon}
+          height="24px"
+          width="24px"
+          fontSize="28px"
+          className={clsx('tool')}
+        />
+      </ToolPopup>
+      <ToolPopup name="Plugins">
+        <Icon
+          icon={WidgetsRoundedIcon}
+          height="24px"
+          width="24px"
+          fontSize="24px"
+          className={clsx('tool')}
+        />
+      </ToolPopup>
+    </SideToolBarContainer>
+  );
+};
diff --git a/packages/app/src/components/SplitPane.tsx b/packages/app/src/components/SplitPane.tsx
new file mode 100644
index 00000000..b86611da
--- /dev/null
+++ b/packages/app/src/components/SplitPane.tsx
@@ -0,0 +1,225 @@
+import React, { FC, useEffect, useMemo, useRef, useState } from 'react';
+
+import styled from '@emotion/styled';
+import clsx from 'clsx';
+
+import {
+  ensureSize,
+  useDraggingSplitPane,
+} from '../hooks/useDraggingSplitPane';
+import {
+  PaneConfigs,
+  PaneProps,
+  SplitPaneProps,
+} from '../types/splitpane.type';
+
+import { Pane } from './Pane';
+import { Sash } from './Sash';
+import { SashContent } from './SashContent';
+
+const SplitPaneContainer = styled.div`
+  flex: 1;
+  height: 100%;
+  position: relative;
+  width: 100%;
+
+  & .pane {
+    height: 100%;
+    position: absolute;
+    white-space: normal;
+    width: 100%;
+    overflow: hidden;
+  }
+
+  & .sash {
+    height: 100%;
+    position: absolute;
+    top: 0;
+    transition: background-color 0.1s;
+    width: 100%;
+    z-index: 9999;
+
+    &.disabled {
+      pointer-events: none;
+    }
+
+    &.vertical {
+      cursor: col-resize;
+    }
+
+    &.horizontal {
+      cursor: row-resize;
+    }
+  }
+
+  &.dragging {
+    &.vertical {
+      cursor: col-resize;
+    }
+
+    &.horizontal {
+      cursor: row-resize;
+    }
+  }
+
+  &.disabled {
+    user-select: none;
+  }
+`;
+
+export const SplitPane: FC<SplitPaneProps> = ({
+  children,
+  sizes: propSizes,
+  className: wrapClassName,
+  sashClassName,
+  resizerSize = 4,
+  allowResize = true,
+  performanceMode = false,
+  split = 'vertical',
+  sashRender = (_, active) => <SashContent active={active} type="vscode" />,
+  onSizesChange,
+  onStartDrag,
+  onEndDrag,
+  ...otherProps
+}) => {
+  const wrapper = useRef<HTMLDivElement>(null);
+  const [wrapperRect, setWrapperRect] = useState<{
+    height?: number;
+    width?: number;
+    x?: number;
+    y?: number;
+  }>({});
+
+  useEffect(() => {
+    const resizeObserver = new ResizeObserver(() => {
+      setWrapperRect(wrapper.current?.getBoundingClientRect() ?? {});
+    });
+
+    if (wrapper.current) {
+      resizeObserver.observe(wrapper.current);
+    }
+
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, [wrapper]);
+
+  const { sizeName, splitPos, splitAxis } = useMemo(
+    () => ({
+      sizeName:
+        ((split === 'vertical' ? 'width' : 'height') as 'width') || 'height',
+      splitPos: ((split === 'vertical' ? 'left' : 'top') as 'left') || 'top',
+      splitAxis: ((split === 'vertical' ? 'x' : 'y') as 'x') || 'y',
+    }),
+    [split],
+  );
+
+  const childrenToSplit: JSX.Element[] = children as JSX.Element[];
+  const wrapSize: number = wrapperRect[sizeName] ?? 0;
+
+  const paneLimitSizes: number[][] = useMemo(
+    () =>
+      childrenToSplit.map((childNode) => {
+        const limits = [0, Infinity];
+        if (childNode.type === Pane) {
+          const { minSize, maxSize } = childNode.props as PaneConfigs;
+          limits[0] = ensureSize(minSize, wrapSize, 0);
+          limits[1] = ensureSize(maxSize, wrapSize);
+        }
+        return limits;
+      }),
+    [childrenToSplit, wrapSize],
+  );
+
+  const sizes: number[] = useMemo(() => {
+    let count = 0;
+    let currSum = 0;
+    const res: number[] = childrenToSplit.map((_, index) => {
+      const size: number = ensureSize(propSizes[index], wrapSize);
+      if (size === Infinity) {
+        count++;
+      } else {
+        currSum += size;
+      }
+      return size;
+    });
+
+    if (currSum > wrapSize || (!count && currSum < wrapSize)) {
+      const cacheNum: number = (currSum - wrapSize) / currSum;
+      return res.map((size) =>
+        size === Infinity ? 0 : size - size * cacheNum,
+      );
+    }
+
+    if (count > 0) {
+      const average: number = (wrapSize - currSum) / count;
+      return res.map((size) => (size === Infinity ? average : size));
+    }
+
+    return res;
+  }, [...propSizes, childrenToSplit.length, wrapSize]);
+
+  const {
+    isDragging,
+    sashPosSizes,
+    paneSizes,
+    panePoses,
+    onDraggingStart,
+    onDraggingEnd,
+    onDraggingMove,
+  } = useDraggingSplitPane({
+    sizes,
+    paneLimitSizes,
+    splitAxis,
+    performanceMode,
+    onStartDrag,
+    onEndDrag,
+    onSizesChange,
+  });
+
+  return (
+    <SplitPaneContainer
+      className={clsx(
+        'split-pane',
+        split,
+        { dragging: isDragging },
+        wrapClassName,
+      )}
+      ref={wrapper}
+      {...otherProps}
+    >
+      {childrenToSplit.map((childNode, childIndex) => {
+        const isPane: boolean = childNode.type === Pane;
+        const paneProps = (isPane ? childNode.props : {}) as PaneProps;
+
+        return (
+          <Pane
+            key={childIndex}
+            className={clsx('pane', paneProps.className)}
+            style={{
+              ...paneProps.style,
+              [sizeName]: paneSizes[childIndex],
+              [splitPos]: panePoses[childIndex],
+            }}
+          >
+            {isPane ? paneProps.children : childNode}
+          </Pane>
+        );
+      })}
+      {sashPosSizes.slice(1, -1).map((posSize, index) => (
+        <Sash
+          key={index}
+          className={clsx({ disabled: !allowResize }, split)}
+          style={{
+            [sizeName]: resizerSize,
+            [splitPos]: posSize - resizerSize / 2,
+          }}
+          render={sashRender.bind(null, index)}
+          onStartDrag={onDraggingStart}
+          onDragging={(e) => onDraggingMove(e, index)}
+          onEndDrag={onDraggingEnd}
+        />
+      ))}
+    </SplitPaneContainer>
+  );
+};
diff --git a/packages/app/src/components/descriptors/CodeDescriptor.tsx b/packages/app/src/components/descriptors/CodeDescriptor.tsx
index 2ecdb750..23b37311 100644
--- a/packages/app/src/components/descriptors/CodeDescriptor.tsx
+++ b/packages/app/src/components/descriptors/CodeDescriptor.tsx
@@ -12,7 +12,7 @@ import { useRecoilState } from 'recoil';
 import { useStableCallback } from '../../hooks/useStableCallback';
 import { editingCodeIdState } from '../../state/editor';
 import { editingNodeIdState } from '../../state/node';
-import { Node, UIContext } from '../../types/studio.type';
+import { CodeUIContext, Node, UIContext } from '../../types/studio.type';
 import { UIContextDescriptor } from '../../types/uicontext.type';
 import { fakeId } from '../../utils/fakeId';
 import { LazyCodeEditor, LazySyntaxedText } from '../LazyComponents';
@@ -23,7 +23,7 @@ export const CodeNodeContentBody: FC<
     node: Node;
     id: string;
     onEditClick?: (node: Node, editingId: string) => void;
-  } & Extract<UIContext, { type: 'code' }>
+  } & CodeUIContext
 > = memo(
   ({
     node,
diff --git a/packages/app/src/hooks/useContextMenu.ts b/packages/app/src/hooks/useContextMenu.ts
index c8a84e3a..6dc9f0d7 100644
--- a/packages/app/src/hooks/useContextMenu.ts
+++ b/packages/app/src/hooks/useContextMenu.ts
@@ -126,7 +126,7 @@ export function useContextMenu() {
       );
 
       setShowContextMenu(true);
-      setContextMenu({ x: event.clientX, y: event.clientY, data });
+      setContextMenu({ x: event.clientX - 38, y: event.clientY, data });
 
       if (data?.type.startsWith('node-')) {
         const nodeId: RecordId = data.element.dataset.nodeid as RecordId;
diff --git a/packages/app/src/hooks/useDraggingSplitPane.ts b/packages/app/src/hooks/useDraggingSplitPane.ts
new file mode 100644
index 00000000..a081afbb
--- /dev/null
+++ b/packages/app/src/hooks/useDraggingSplitPane.ts
@@ -0,0 +1,123 @@
+import React, { useCallback, useMemo, useRef, useState } from 'react';
+
+import { throttle } from 'lodash-es';
+
+import { SplitPaneConfigs } from '../types/splitpane.type';
+
+export function useDraggingSplitPane({
+  sizes,
+  paneLimitSizes,
+  splitAxis,
+  performanceMode,
+  onStartDrag,
+  onEndDrag,
+  onSizesChange,
+}: SplitPaneConfigs) {
+  const axis = useRef<{ x: number; y: number }>({ x: 0, y: 0 });
+  const cacheSizes = useRef<{
+    sizes: (string | number)[];
+    sashPosSizes: (string | number)[];
+  }>({
+    sizes: [],
+    sashPosSizes: [],
+  });
+
+  const [isDragging, setIsDragging] = useState<boolean>(false);
+
+  const sashPosSizes = useMemo(
+    () => sizes.reduce((a, b) => [...a, a[a.length - 1] + b], [0]),
+    [...sizes],
+  );
+
+  const onDraggingStart = useCallback(
+    (e: React.MouseEvent) => {
+      document?.body?.classList?.add('non-user-select');
+      axis.current = { x: e.pageX, y: e.pageY };
+      cacheSizes.current = { sizes, sashPosSizes };
+      setIsDragging(true);
+      onStartDrag?.(e);
+    },
+    [onStartDrag, sizes, sashPosSizes],
+  );
+
+  const onDraggingEnd = useCallback(
+    (e: React.MouseEvent) => {
+      document?.body?.classList?.remove('non-user-select');
+      axis.current = { x: e.pageX, y: e.pageY };
+      cacheSizes.current = { sizes, sashPosSizes };
+      setIsDragging(false);
+      onEndDrag?.(e);
+    },
+    [onEndDrag, sizes, sashPosSizes],
+  );
+
+  const onDraggingMove = useCallback(
+    (e: React.MouseEvent, i: number) => {
+      const currAxis = { x: e.pageX, y: e.pageY };
+      let distanceX = currAxis[splitAxis] - axis.current[splitAxis];
+
+      const leftBorder = -Math.min(
+        sizes[i] - paneLimitSizes[i][0],
+        paneLimitSizes[i + 1][1] - sizes[i + 1],
+      );
+
+      const rightBorder = Math.min(
+        sizes[i + 1] - paneLimitSizes[i][0],
+        paneLimitSizes[i][1] - sizes[i],
+      );
+
+      if (distanceX < leftBorder) {
+        distanceX = leftBorder;
+      }
+
+      if (distanceX > rightBorder) {
+        distanceX = rightBorder;
+      }
+
+      const nextSizes = [...sizes];
+      nextSizes[i] += distanceX;
+      nextSizes[i + 1] -= distanceX;
+
+      onSizesChange?.(nextSizes);
+
+      axis.current = currAxis;
+    },
+    [onSizesChange, paneLimitSizes, sizes, splitAxis],
+  );
+
+  const paneFollow = !(performanceMode && isDragging);
+  const paneSizes: (string | number)[] = paneFollow
+    ? sizes
+    : cacheSizes.current.sizes;
+  const panePoses = paneFollow ? sashPosSizes : cacheSizes.current.sashPosSizes;
+
+  return {
+    isDragging,
+    sashPosSizes,
+    paneSizes,
+    panePoses,
+    onDraggingStart,
+    onDraggingEnd,
+    onDraggingMove,
+  };
+}
+
+export function ensureSize(
+  size: string | number | undefined,
+  sum: number,
+  defaultValue: number = Infinity,
+) {
+  if (typeof size === 'undefined') return defaultValue;
+  if (typeof size === 'number') return size;
+  try {
+    if (size.endsWith('%')) {
+      return sum * (parseFloat(size.replace('%', '')) / 100);
+    }
+    if (size.endsWith('px')) {
+      return parseFloat(size.replace('px', ''));
+    }
+  } catch (error) {
+    console.error('Error parsing size:', size, error);
+  }
+  return defaultValue;
+}
diff --git a/packages/app/src/hooks/useServer.ts b/packages/app/src/hooks/useServer.ts
new file mode 100644
index 00000000..d16880d0
--- /dev/null
+++ b/packages/app/src/hooks/useServer.ts
@@ -0,0 +1,34 @@
+import { useRef } from 'react';
+
+import { disconnect } from 'process';
+
+import { useLatest } from 'ahooks';
+import { useRecoilValue } from 'recoil';
+
+import { useServerURL } from '../apis/server';
+import { serverState, serverURLState } from '../state/settings';
+
+export function useServer(
+  options: { onConnect?: () => void; onDisconnect?: () => void } = {},
+) {
+  const server = useRecoilValue(serverState);
+  const { setServerURL } = useServerURL();
+  const onConnectLatest = useLatest(options.onConnect ?? (() => {}));
+
+  const connectRef = useRef<(url: string) => void | undefined>();
+
+  connectRef.current = (url: string) => {
+    if (!url) {
+      url = 'http://localhost:5127';
+    }
+    setServerURL(url);
+    onConnectLatest.current?.();
+  };
+
+  return {
+    serverState: server,
+    connect: (url: string) => {
+      connectRef.current?.(url);
+    },
+  };
+}
diff --git a/packages/app/src/icons/logo/Logo.tsx b/packages/app/src/icons/logo/Logo.tsx
new file mode 100644
index 00000000..9fc3e1ef
--- /dev/null
+++ b/packages/app/src/icons/logo/Logo.tsx
@@ -0,0 +1,56 @@
+import * as React from 'react';
+import type { SVGProps } from 'react';
+
+export const SvgLogo = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    {...props}
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 100 100"
+    style={{
+      color: 'inherit',
+      ...props.style,
+    }}
+  >
+    <g clipPath="url(#clip0_1128_533)">
+      <path
+        d="M48.4375 63.1524C41.1737 63.1524 35.2852 57.2639 35.2852 50C35.2852 42.7362 41.1737 36.8477 48.4375 36.8477C55.7013 36.8477 61.5898 42.7362 61.5898 50C61.5898 57.2639 55.7013 63.1524 48.4375 63.1524Z"
+        stroke="currentColor"
+        strokeWidth="6.50781"
+      />
+      <path
+        d="M64.8437 25.7812L80.4688 50.3906L64.8437 75"
+        stroke="currentColor"
+        strokeWidth="6.51042"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M78.125 50H64.8438"
+        stroke="currentColor"
+        strokeWidth="6.51042"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M32.0313 50H18.75"
+        stroke="currentColor"
+        strokeWidth="6.51042"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M18.75 49.7396C18.75 67.7176 33.3333 82.2917 51.3021 82.2917C33.3241 82.2917 18.75 67.7176 18.75 49.7396ZM18.75 49.7396C18.75 31.7616 33.3241 17.1875 51.3021 17.1875C33.3333 17.1875 18.75 31.7616 18.75 49.7396Z"
+        stroke="currentColor"
+        strokeWidth="6.51042"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_1128_533">
+        <rect width="100" height="100" fill="currentColor" />
+      </clipPath>
+    </defs>
+  </svg>
+);
diff --git a/packages/app/src/icons/logo/index.ts b/packages/app/src/icons/logo/index.ts
new file mode 100644
index 00000000..c7d7d8ea
--- /dev/null
+++ b/packages/app/src/icons/logo/index.ts
@@ -0,0 +1 @@
+export { SvgLogo } from './Logo';
diff --git a/packages/app/src/icons/logo/logo.svg b/packages/app/src/icons/logo/logo.svg
new file mode 100644
index 00000000..0e195da8
--- /dev/null
+++ b/packages/app/src/icons/logo/logo.svg
@@ -0,0 +1,14 @@
+<svg width="100" height="100" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1128_533)">
+<path d="M48.4375 63.1524C41.1737 63.1524 35.2852 57.2639 35.2852 50C35.2852 42.7362 41.1737 36.8477 48.4375 36.8477C55.7013 36.8477 61.5898 42.7362 61.5898 50C61.5898 57.2639 55.7013 63.1524 48.4375 63.1524Z" stroke="white" stroke-width="6.50781"/>
+<path d="M64.8437 25.7812L80.4688 50.3906L64.8437 75" stroke="white" stroke-width="6.51042" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M78.125 50H64.8438" stroke="white" stroke-width="6.51042" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M32.0313 50H18.75" stroke="white" stroke-width="6.51042" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M18.75 49.7396C18.75 67.7176 33.3333 82.2917 51.3021 82.2917C33.3241 82.2917 18.75 67.7176 18.75 49.7396ZM18.75 49.7396C18.75 31.7616 33.3241 17.1875 51.3021 17.1875C33.3333 17.1875 18.75 31.7616 18.75 49.7396Z" stroke="white" stroke-width="6.51042" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+<defs>
+<clipPath id="clip0_1128_533">
+<rect width="100" height="100" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/packages/app/src/index.css b/packages/app/src/index.css
index d4a3d56d..8243644c 100644
--- a/packages/app/src/index.css
+++ b/packages/app/src/index.css
@@ -7,6 +7,10 @@ body {
   -moz-osx-font-smoothing: grayscale;
 }
 
+body.non-user-select {
+  user-select: none;
+}
+
 code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
     monospace;
@@ -24,4 +28,8 @@ html[data-color-mode='light'] {
   .node-tag {
     border: 2px solid var(--primary-color);
   }
+}
+
+:root {
+  --header-height: 38px;
 }
\ No newline at end of file
diff --git a/packages/app/src/logo.svg b/packages/app/src/logo.svg
deleted file mode 100644
index 9dfc1c05..00000000
--- a/packages/app/src/logo.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3"><g fill="#61DAFB"><path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/><circle cx="420.9" cy="296.5" r="45.7"/><path d="M520.5 78.1z"/></g></svg>
\ No newline at end of file
diff --git a/packages/app/src/types/appbuilder.type.ts b/packages/app/src/types/appbuilder.type.ts
new file mode 100644
index 00000000..46170c1d
--- /dev/null
+++ b/packages/app/src/types/appbuilder.type.ts
@@ -0,0 +1,9 @@
+export type AppBuilderCardProps = {
+  cover: string;
+  title: string;
+  description?: string;
+};
+
+export type AppBuilderActionButtonProps = {
+  name: string;
+};
diff --git a/packages/app/src/types/splitpane.type.ts b/packages/app/src/types/splitpane.type.ts
new file mode 100644
index 00000000..287f96cc
--- /dev/null
+++ b/packages/app/src/types/splitpane.type.ts
@@ -0,0 +1,53 @@
+import React, { PropsWithChildren, ReactNode } from 'react';
+
+type HTMLElementProps = {
+  title?: string;
+  style?: React.CSSProperties;
+  className?: string;
+  role?: string;
+};
+
+export type PaneConfigs = {
+  maxSize?: number | string;
+  minSize?: number | string;
+};
+
+export type SplitPaneConfigs = {
+  sizes: number[];
+  paneLimitSizes: number[][];
+  splitAxis: 'x' | 'y';
+  performanceMode: boolean;
+  onStartDrag?: (e: React.MouseEvent) => void;
+  onEndDrag?: (e: React.MouseEvent) => void;
+  onSizesChange?: (sizes: number[]) => void;
+};
+
+export type PaneProps = PropsWithChildren<HTMLElementProps & PaneConfigs>;
+
+export type SashProps = HTMLElementProps & {
+  render: (active: boolean) => ReactNode;
+  onStartDrag: (e: React.MouseEvent) => void;
+  onDragging: (e: React.MouseEvent) => void;
+  onEndDrag: (e: React.MouseEvent) => void;
+};
+
+export type SashContentProps = PropsWithChildren<{
+  className?: string;
+  type?: string;
+  active?: boolean;
+}>;
+
+export type SplitPaneProps = PropsWithChildren<
+  HTMLElementProps & {
+    sizes: (string | number)[];
+    allowResize?: boolean;
+    split?: 'vertical' | 'horizontal';
+    sashClassName?: string;
+    resizerSize?: number;
+    performanceMode?: boolean;
+    sashRender?: (index: number, active: boolean) => React.ReactNode;
+    onSizesChange?: (sizes: number[]) => void;
+    onStartDrag?: (e: React.MouseEvent) => void;
+    onEndDrag?: (e: React.MouseEvent) => void;
+  }
+>;
diff --git a/packages/app/vite.config.mts b/packages/app/vite.config.mts
index 60cb8c0f..22861a3a 100644
--- a/packages/app/vite.config.mts
+++ b/packages/app/vite.config.mts
@@ -137,8 +137,8 @@ export default defineConfig(async ({ mode }) => {
     resolve: {
       extensions: resolveExtensions,
       alias: {
-        'stream/web': 'stream-browserify'
-      }
+        "stream/web": "stream-browserify",
+      },
     },
     plugins: [
       mode === "desktop"
@@ -168,10 +168,10 @@ export default defineConfig(async ({ mode }) => {
       !!env.HTTPS && basicSsl(),
     ],
     test: {
-      include: ['src/**/*.{test,spec}.?(c|m)[jt]s?(x)'],
-      environment: 'jsdom',
+      include: ["src/**/*.{test,spec}.?(c|m)[jt]s?(x)"],
+      environment: "jsdom",
       globals: true,
-      setupFiles: './src/setupTests.js',
+      setupFiles: "./src/setupTests.js",
     },
   };
 });
diff --git a/yarn.lock b/yarn.lock
index 1dabb9f8..0f59ed2a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2740,13 +2740,6 @@
   optionalDependencies:
     global-agent "^3.0.0"
 
-"@emnapi/runtime@^1.1.1":
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/@emnapi/runtime/-/runtime-1.2.0.tgz#71d018546c3a91f3b51106530edbc056b9f2f2e3"
-  integrity sha512-bV21/9LQmcQeCPEg3BDFtvwL6cwiTMksYNWQQ4KOxCZikEGalWtenoZ0wCiukJINlGCIi2KXx01g4FoH/LxpzQ==
-  dependencies:
-    tslib "^2.4.0"
-
 "@emotion/babel-plugin@^11.11.0":
   version "11.11.0"
   resolved "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.11.0.tgz"
@@ -2854,10 +2847,10 @@
   resolved "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.3.1.tgz"
   integrity sha512-EsBwpc7hBUJWAsNPBmJy4hxWx12v6bshQsldrVmjxJoc3isbxhOrF2IcCpaXxfvq03NwkI7sbsOLXbYuqF/8Ww==
 
-"@encrejs/core@workspace:^":
-  version "0.0.3"
-  resolved "https://registry.yarnpkg.com/@encrejs/core/-/core-0.0.3.tgz#58646216115c49082a081f4a87a341e64f83ef0e"
-  integrity sha512-HVzW1Ta/fXw/19B3dCoDCAAhBoq83TL1ZLEk9GFO1eepNUMJHIOsS3j5KF9zheEhxLChcBHC9j2DnENg37Yh7A==
+"@encrejs/core@^0.0.6":
+  version "0.0.6"
+  resolved "https://registry.yarnpkg.com/@encrejs/core/-/core-0.0.6.tgz#1fe51cdd3e1e5a3adde27323f7d533e45587bda0"
+  integrity sha512-0FI6XLaVf/ThEu1oGUflRRrcNE9an7utDAf6YOQn0ctYOHonV8od+nmU1UyFt3rTIQmQQSgr7l1drq2hz2/zfA==
   dependencies:
     "@google/generative-ai" "^0.1.3"
     "@types/object-hash" "^3.0.5"
@@ -2875,7 +2868,6 @@
     pdf-parse "^1.1.1"
     redis "^4.6.10"
     release-it "^17.3.0"
-    sharp "^0.33.2"
     tiktoken "^1.0.10"
     ts-node "^10.9.1"
     ts-pattern "^5.0.6"
@@ -3232,129 +3224,11 @@
   resolved "https://registry.yarnpkg.com/@iarna/toml/-/toml-2.2.5.tgz#b32366c89b43c6f8cefbdefac778b9c828e3ba8c"
   integrity sha512-trnsAYxU3xnS1gPHPyU961coFyLkh4gAD/0zQ5mymY4yOZ+CYvsPqUbOFSw0aDM4y0tV7tiFxL/1XfXPNC6IPg==
 
-"@img/sharp-darwin-arm64@0.33.4":
-  version "0.33.4"
-  resolved "https://registry.yarnpkg.com/@img/sharp-darwin-arm64/-/sharp-darwin-arm64-0.33.4.tgz#a1cf4a7febece334f16e0328b9689f05797d7aec"
-  integrity sha512-p0suNqXufJs9t3RqLBO6vvrgr5OhgbWp76s5gTRvdmxmuv9E1rcaqGUsl3l4mKVmXPkTkTErXediAui4x+8PSA==
-  optionalDependencies:
-    "@img/sharp-libvips-darwin-arm64" "1.0.2"
-
-"@img/sharp-darwin-x64@0.33.4":
-  version "0.33.4"
-  resolved "https://registry.yarnpkg.com/@img/sharp-darwin-x64/-/sharp-darwin-x64-0.33.4.tgz#f77be2d7c3609d3e77cd337b199a772e07b87bd2"
-  integrity sha512-0l7yRObwtTi82Z6ebVI2PnHT8EB2NxBgpK2MiKJZJ7cz32R4lxd001ecMhzzsZig3Yv9oclvqqdV93jo9hy+Dw==
-  optionalDependencies:
-    "@img/sharp-libvips-darwin-x64" "1.0.2"
-
-"@img/sharp-libvips-darwin-arm64@1.0.2":
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/@img/sharp-libvips-darwin-arm64/-/sharp-libvips-darwin-arm64-1.0.2.tgz#b69f49fecbe9572378675769b189410721b0fa53"
-  integrity sha512-tcK/41Rq8IKlSaKRCCAuuY3lDJjQnYIW1UXU1kxcEKrfL8WR7N6+rzNoOxoQRJWTAECuKwgAHnPvqXGN8XfkHA==
-
-"@img/sharp-libvips-darwin-x64@1.0.2":
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/@img/sharp-libvips-darwin-x64/-/sharp-libvips-darwin-x64-1.0.2.tgz#5665da7360d8e5ed7bee314491c8fe736b6a3c39"
-  integrity sha512-Ofw+7oaWa0HiiMiKWqqaZbaYV3/UGL2wAPeLuJTx+9cXpCRdvQhCLG0IH8YGwM0yGWGLpsF4Su9vM1o6aer+Fw==
-
-"@img/sharp-libvips-linux-arm64@1.0.2":
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/@img/sharp-libvips-linux-arm64/-/sharp-libvips-linux-arm64-1.0.2.tgz#8a05e5e9e9b760ff46561e32f19bd5e035fa881c"
-  integrity sha512-x7kCt3N00ofFmmkkdshwj3vGPCnmiDh7Gwnd4nUwZln2YjqPxV1NlTyZOvoDWdKQVDL911487HOueBvrpflagw==
-
-"@img/sharp-libvips-linux-arm@1.0.2":
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/@img/sharp-libvips-linux-arm/-/sharp-libvips-linux-arm-1.0.2.tgz#0fd33b9bf3221948ce0ca7a5a725942626577a03"
-  integrity sha512-iLWCvrKgeFoglQxdEwzu1eQV04o8YeYGFXtfWU26Zr2wWT3q3MTzC+QTCO3ZQfWd3doKHT4Pm2kRmLbupT+sZw==
-
-"@img/sharp-libvips-linux-s390x@1.0.2":
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/@img/sharp-libvips-linux-s390x/-/sharp-libvips-linux-s390x-1.0.2.tgz#4b89150ec91b256ee2cbb5bb125321bf029a4770"
-  integrity sha512-cmhQ1J4qVhfmS6szYW7RT+gLJq9dH2i4maq+qyXayUSn9/3iY2ZeWpbAgSpSVbV2E1JUL2Gg7pwnYQ1h8rQIog==
-
-"@img/sharp-libvips-linux-x64@1.0.2":
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/@img/sharp-libvips-linux-x64/-/sharp-libvips-linux-x64-1.0.2.tgz#947ccc22ca5bc8c8cfe921b39a5fdaebc5e39f3f"
-  integrity sha512-E441q4Qdb+7yuyiADVi5J+44x8ctlrqn8XgkDTwr4qPJzWkaHwD489iZ4nGDgcuya4iMN3ULV6NwbhRZJ9Z7SQ==
-
-"@img/sharp-libvips-linuxmusl-arm64@1.0.2":
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/@img/sharp-libvips-linuxmusl-arm64/-/sharp-libvips-linuxmusl-arm64-1.0.2.tgz#821d58ce774f0f8bed065b69913a62f65d512f2f"
-  integrity sha512-3CAkndNpYUrlDqkCM5qhksfE+qSIREVpyoeHIU6jd48SJZViAmznoQQLAv4hVXF7xyUB9zf+G++e2v1ABjCbEQ==
-
-"@img/sharp-libvips-linuxmusl-x64@1.0.2":
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/@img/sharp-libvips-linuxmusl-x64/-/sharp-libvips-linuxmusl-x64-1.0.2.tgz#4309474bd8b728a61af0b3b4fad0c476b5f3ccbe"
-  integrity sha512-VI94Q6khIHqHWNOh6LLdm9s2Ry4zdjWJwH56WoiJU7NTeDwyApdZZ8c+SADC8OH98KWNQXnE01UdJ9CSfZvwZw==
-
-"@img/sharp-linux-arm64@0.33.4":
-  version "0.33.4"
-  resolved "https://registry.yarnpkg.com/@img/sharp-linux-arm64/-/sharp-linux-arm64-0.33.4.tgz#bd390113e256487041411b988ded13a26cfc5f95"
-  integrity sha512-2800clwVg1ZQtxwSoTlHvtm9ObgAax7V6MTAB/hDT945Tfyy3hVkmiHpeLPCKYqYR1Gcmv1uDZ3a4OFwkdBL7Q==
-  optionalDependencies:
-    "@img/sharp-libvips-linux-arm64" "1.0.2"
-
-"@img/sharp-linux-arm@0.33.4":
-  version "0.33.4"
-  resolved "https://registry.yarnpkg.com/@img/sharp-linux-arm/-/sharp-linux-arm-0.33.4.tgz#14ecc81f38f75fb4cd7571bc83311746d6745fca"
-  integrity sha512-RUgBD1c0+gCYZGCCe6mMdTiOFS0Zc/XrN0fYd6hISIKcDUbAW5NtSQW9g/powkrXYm6Vzwd6y+fqmExDuCdHNQ==
-  optionalDependencies:
-    "@img/sharp-libvips-linux-arm" "1.0.2"
-
-"@img/sharp-linux-s390x@0.33.4":
-  version "0.33.4"
-  resolved "https://registry.yarnpkg.com/@img/sharp-linux-s390x/-/sharp-linux-s390x-0.33.4.tgz#119e8081e2c6741b5ac908fe02244e4c559e525f"
-  integrity sha512-h3RAL3siQoyzSoH36tUeS0PDmb5wINKGYzcLB5C6DIiAn2F3udeFAum+gj8IbA/82+8RGCTn7XW8WTFnqag4tQ==
-  optionalDependencies:
-    "@img/sharp-libvips-linux-s390x" "1.0.2"
-
-"@img/sharp-linux-x64@0.33.4":
-  version "0.33.4"
-  resolved "https://registry.yarnpkg.com/@img/sharp-linux-x64/-/sharp-linux-x64-0.33.4.tgz#21d4c137b8da9a313b069ff5c920ded709f853d7"
-  integrity sha512-GoR++s0XW9DGVi8SUGQ/U4AeIzLdNjHka6jidVwapQ/JebGVQIpi52OdyxCNVRE++n1FCLzjDovJNozif7w/Aw==
-  optionalDependencies:
-    "@img/sharp-libvips-linux-x64" "1.0.2"
-
-"@img/sharp-linuxmusl-arm64@0.33.4":
-  version "0.33.4"
-  resolved "https://registry.yarnpkg.com/@img/sharp-linuxmusl-arm64/-/sharp-linuxmusl-arm64-0.33.4.tgz#f3fde68fd67b85a32da6f1155818c3b58b8e7ae0"
-  integrity sha512-nhr1yC3BlVrKDTl6cO12gTpXMl4ITBUZieehFvMntlCXFzH2bvKG76tBL2Y/OqhupZt81pR7R+Q5YhJxW0rGgQ==
-  optionalDependencies:
-    "@img/sharp-libvips-linuxmusl-arm64" "1.0.2"
-
-"@img/sharp-linuxmusl-x64@0.33.4":
-  version "0.33.4"
-  resolved "https://registry.yarnpkg.com/@img/sharp-linuxmusl-x64/-/sharp-linuxmusl-x64-0.33.4.tgz#44373724aecd7b69900e0578228144e181db7892"
-  integrity sha512-uCPTku0zwqDmZEOi4ILyGdmW76tH7dm8kKlOIV1XC5cLyJ71ENAAqarOHQh0RLfpIpbV5KOpXzdU6XkJtS0daw==
-  optionalDependencies:
-    "@img/sharp-libvips-linuxmusl-x64" "1.0.2"
-
-"@img/sharp-wasm32@0.33.4":
-  version "0.33.4"
-  resolved "https://registry.yarnpkg.com/@img/sharp-wasm32/-/sharp-wasm32-0.33.4.tgz#88e3f18d7e7cd8cfe1af98e9963db4d7b6491435"
-  integrity sha512-Bmmauh4sXUsUqkleQahpdNXKvo+wa1V9KhT2pDA4VJGKwnKMJXiSTGphn0gnJrlooda0QxCtXc6RX1XAU6hMnQ==
-  dependencies:
-    "@emnapi/runtime" "^1.1.1"
-
-"@img/sharp-win32-ia32@0.33.4":
-  version "0.33.4"
-  resolved "https://registry.yarnpkg.com/@img/sharp-win32-ia32/-/sharp-win32-ia32-0.33.4.tgz#b1c772dd2952e983980b1eb85808fa8129484d46"
-  integrity sha512-99SJ91XzUhYHbx7uhK3+9Lf7+LjwMGQZMDlO/E/YVJ7Nc3lyDFZPGhjwiYdctoH2BOzW9+TnfqcaMKt0jHLdqw==
-
-"@img/sharp-win32-x64@0.33.4":
-  version "0.33.4"
-  resolved "https://registry.yarnpkg.com/@img/sharp-win32-x64/-/sharp-win32-x64-0.33.4.tgz#106f911134035b4157ec92a0c154a6b6f88fa4c1"
-  integrity sha512-3QLocdTRVIrFNye5YocZl+KKpYKP+fksi1QhmOArgx7GyhIbQp/WrJRu176jm8IxromS7RIkzMiMINVdBtC8Aw==
-
 "@inquirer/figures@^1.0.2":
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/@inquirer/figures/-/figures-1.0.3.tgz#1227cc980f88e6d6ab85abadbf164f5038041edd"
   integrity sha512-ErXXzENMH5pJt5/ssXV0DfWUZqly8nGzf0UcBV9xTnP+KyffE2mqyxIMBrZ8ijQck2nU0TQm40EQB53YreyWHw==
 
-"@inquirer/figures@^1.0.3":
-  version "1.0.5"
-  resolved "https://registry.yarnpkg.com/@inquirer/figures/-/figures-1.0.5.tgz#57f9a996d64d3e3345d2a3ca04d36912e94f8790"
-  integrity sha512-79hP/VWdZ2UVc9bFGJnoQ/lQMpL74mGgzSYX1xUqCVk7/v73vJCMw1VuyWN1jGkZ9B3z7THAbySqGbCNefcjfA==
-
 "@isaacs/cliui@^8.0.2":
   version "8.0.2"
   resolved "https://registry.yarnpkg.com/@isaacs/cliui/-/cliui-8.0.2.tgz#b37667b7bc181c168782259bab42474fbf52b550"
@@ -7724,27 +7598,11 @@ color-name@1.1.3:
   resolved "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz"
   integrity sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==
 
-color-name@^1.0.0, color-name@~1.1.4:
+color-name@~1.1.4:
   version "1.1.4"
   resolved "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz"
   integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==
 
-color-string@^1.9.0:
-  version "1.9.1"
-  resolved "https://registry.yarnpkg.com/color-string/-/color-string-1.9.1.tgz#4467f9146f036f855b764dfb5bf8582bf342c7a4"
-  integrity sha512-shrVawQFojnZv6xM40anx4CkoDP+fZsw/ZerEMsW/pyzsRbElpsL/DBVW7q3ExxwusdNXI3lXpuhEZkzs8p5Eg==
-  dependencies:
-    color-name "^1.0.0"
-    simple-swizzle "^0.2.2"
-
-color@^4.2.3:
-  version "4.2.3"
-  resolved "https://registry.yarnpkg.com/color/-/color-4.2.3.tgz#d781ecb5e57224ee43ea9627560107c0e0c6463a"
-  integrity sha512-1rXeuUUiGGrykh+CeBdu5Ie7OJwinCgQY0bc7GCRxy5xVHy+moaqkpL/jqQq0MtQOeYcrqEz4abc5f0KtU7W4A==
-  dependencies:
-    color-convert "^2.0.1"
-    color-string "^1.9.0"
-
 colord@^2.9.1, colord@^2.9.3:
   version "2.9.3"
   resolved "https://registry.npmjs.org/colord/-/colord-2.9.3.tgz"
@@ -8708,11 +8566,6 @@ destroy@1.2.0:
   resolved "https://registry.npmjs.org/destroy/-/destroy-1.2.0.tgz"
   integrity sha512-2sJGJTaXIIaR1w4iJSNoN0hnMY7Gpc/n8D4qSCJw8QqFWXf7cuAgnEHxBpweaVcPevC2l3KpjYCx3NypQQgaJg==
 
-detect-libc@^2.0.3:
-  version "2.0.3"
-  resolved "https://registry.yarnpkg.com/detect-libc/-/detect-libc-2.0.3.tgz#f0cd503b40f9939b894697d19ad50895e30cf700"
-  integrity sha512-bwy0MGW55bG41VqxxypOsdSdGqLwXPI/focwgTYCFMbdUiBAxLg9CFzG08sz2aqzknwiX7Hkl0bQENjg8iLByw==
-
 detect-newline@^3.0.0:
   version "3.1.0"
   resolved "https://registry.npmjs.org/detect-newline/-/detect-newline-3.1.0.tgz"
@@ -10779,13 +10632,6 @@ global-agent@^3.0.0:
     semver "^7.3.2"
     serialize-error "^7.0.1"
 
-global-directory@^4.0.1:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/global-directory/-/global-directory-4.0.1.tgz#4d7ac7cfd2cb73f304c53b8810891748df5e361e"
-  integrity sha512-wHTUcDUoZ1H5/0iVqEudYW4/kAlN5cZ3j/bXn0Dpbizl9iaUVeWSHqiOjsgk6OW2bkLclbBjzewBz6weQ1zA2Q==
-  dependencies:
-    ini "4.1.1"
-
 global-dirs@^3.0.0:
   version "3.0.1"
   resolved "https://registry.npmjs.org/global-dirs/-/global-dirs-3.0.1.tgz"
@@ -10847,18 +10693,6 @@ globby@14.0.1:
     slash "^5.1.0"
     unicorn-magic "^0.1.0"
 
-globby@14.0.2:
-  version "14.0.2"
-  resolved "https://registry.yarnpkg.com/globby/-/globby-14.0.2.tgz#06554a54ccfe9264e5a9ff8eded46aa1e306482f"
-  integrity sha512-s3Fq41ZVh7vbbe2PN3nrW7yC7U7MFVc5c98/iTl9c2GawNMKx/J648KQRW6WKkuU8GIbbh2IXfIRQjOZnXcTnw==
-  dependencies:
-    "@sindresorhus/merge-streams" "^2.1.0"
-    fast-glob "^3.3.2"
-    ignore "^5.2.4"
-    path-type "^5.0.0"
-    slash "^5.1.0"
-    unicorn-magic "^0.1.0"
-
 globby@^11.0.1, globby@^11.0.4, globby@^11.1.0:
   version "11.1.0"
   resolved "https://registry.npmjs.org/globby/-/globby-11.1.0.tgz"
@@ -11563,11 +11397,6 @@ ini@2.0.0:
   resolved "https://registry.npmjs.org/ini/-/ini-2.0.0.tgz"
   integrity sha512-7PnF4oN3CvZF23ADhA5wRaYEQpJ8qygSkbtTXWBeXWXmEVRXK+1ITciHWwHhsjv1TmW0MgacIv6hEi5pX5NQdA==
 
-ini@4.1.1:
-  version "4.1.1"
-  resolved "https://registry.yarnpkg.com/ini/-/ini-4.1.1.tgz#d95b3d843b1e906e56d6747d5447904ff50ce7a1"
-  integrity sha512-QQnnxNyfvmHFIsj7gkPcYymR8Jdw/o7mp5ZFihxn6h8Ci6fh3Dx4E1gPjpQEpIuPo9XVNY/ZUwh4BPMjGyL01g==
-
 ini@^1.3.4, ini@^1.3.5, ini@~1.3.0:
   version "1.3.8"
   resolved "https://registry.npmjs.org/ini/-/ini-1.3.8.tgz"
@@ -11604,24 +11433,6 @@ inquirer@9.2.22:
     strip-ansi "^6.0.1"
     wrap-ansi "^6.2.0"
 
-inquirer@9.3.2:
-  version "9.3.2"
-  resolved "https://registry.yarnpkg.com/inquirer/-/inquirer-9.3.2.tgz#9bc5ced19f572e848044baa05094a498f1e448c6"
-  integrity sha512-+ynEbhWKhyomnaX0n2aLIMSkgSlGB5RrWbNXnEqj6mdaIydu6y40MdBjL38SAB0JcdmOaIaMua1azdjLEr3sdw==
-  dependencies:
-    "@inquirer/figures" "^1.0.3"
-    ansi-escapes "^4.3.2"
-    cli-width "^4.1.0"
-    external-editor "^3.1.0"
-    mute-stream "1.0.0"
-    ora "^5.4.1"
-    run-async "^3.0.0"
-    rxjs "^7.8.1"
-    string-width "^4.2.3"
-    strip-ansi "^6.0.1"
-    wrap-ansi "^6.2.0"
-    yoctocolors-cjs "^2.1.1"
-
 internal-slot@^1.0.4, internal-slot@^1.0.5:
   version "1.0.5"
   resolved "https://registry.npmjs.org/internal-slot/-/internal-slot-1.0.5.tgz"
@@ -11741,11 +11552,6 @@ is-arrayish@^0.2.1:
   resolved "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz"
   integrity sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==
 
-is-arrayish@^0.3.1:
-  version "0.3.2"
-  resolved "https://registry.yarnpkg.com/is-arrayish/-/is-arrayish-0.3.2.tgz#4574a2ae56f7ab206896fb431eaeed066fdf8f03"
-  integrity sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==
-
 is-async-function@^2.0.0:
   version "2.0.0"
   resolved "https://registry.npmjs.org/is-async-function/-/is-async-function-2.0.0.tgz"
@@ -11918,14 +11724,6 @@ is-installed-globally@^0.4.0:
     global-dirs "^3.0.0"
     is-path-inside "^3.0.2"
 
-is-installed-globally@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/is-installed-globally/-/is-installed-globally-1.0.0.tgz#08952c43758c33d815692392f7f8437b9e436d5a"
-  integrity sha512-K55T22lfpQ63N4KEN57jZUAaAYqYHEe8veb/TycJRk9DdSCLLcovXz/mL6mOnhQaZsQGwPhuFopdQIlqGSEjiQ==
-  dependencies:
-    global-directory "^4.0.1"
-    is-path-inside "^4.0.0"
-
 is-interactive@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/is-interactive/-/is-interactive-1.0.0.tgz#cea6e6ae5c870a7b0a0004070b7b587e0252912e"
@@ -12006,11 +11804,6 @@ is-path-inside@^3.0.2, is-path-inside@^3.0.3:
   resolved "https://registry.npmjs.org/is-path-inside/-/is-path-inside-3.0.3.tgz"
   integrity sha512-Fd4gABb+ycGAmKou8eMftCupSir5lRxqf4aD/vd0cD2qc4HL07OjCeuHMr8Ro4CoMaeCKDB0/ECBOVWjTwUvPQ==
 
-is-path-inside@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/is-path-inside/-/is-path-inside-4.0.0.tgz#805aeb62c47c1b12fc3fd13bfb3ed1e7430071db"
-  integrity sha512-lJJV/5dYS+RcL8uQdBDW9c9uWFLLBNRyFhnAKXw5tVqLlKZ4RMGZKv+YQ/IA3OhD+RpbJa1LLFM1FQPGyIXvOA==
-
 is-plain-obj@^3.0.0:
   version "3.0.0"
   resolved "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-3.0.0.tgz"
@@ -12225,17 +12018,6 @@ issue-parser@7.0.0:
     lodash.isstring "^4.0.1"
     lodash.uniqby "^4.7.0"
 
-issue-parser@7.0.1:
-  version "7.0.1"
-  resolved "https://registry.yarnpkg.com/issue-parser/-/issue-parser-7.0.1.tgz#8a053e5a4952c75bb216204e454b4fc7d4cc9637"
-  integrity sha512-3YZcUUR2Wt1WsapF+S/WiA2WmlW0cWAoPccMqne7AxEBhCdFeTPjfv/Axb8V2gyCgY3nRw+ksZ3xSUX+R47iAg==
-  dependencies:
-    lodash.capitalize "^4.2.1"
-    lodash.escaperegexp "^4.1.2"
-    lodash.isplainobject "^4.0.6"
-    lodash.isstring "^4.0.1"
-    lodash.uniqby "^4.7.0"
-
 istanbul-lib-coverage@^3.0.0, istanbul-lib-coverage@^3.2.0:
   version "3.2.0"
   resolved "https://registry.npmjs.org/istanbul-lib-coverage/-/istanbul-lib-coverage-3.2.0.tgz"
@@ -13410,11 +13192,6 @@ klona@^2.0.4, klona@^2.0.5:
   resolved "https://registry.npmjs.org/klona/-/klona-2.0.6.tgz"
   integrity sha512-dhG34DXATL5hSxJbIexCft8FChFXtmskoZYnoPWjXQuebWYCNkVeV3KkGegCK9CP1oswI/vQibS2GY7Em/sJJA==
 
-ky@^1.2.0:
-  version "1.5.0"
-  resolved "https://registry.yarnpkg.com/ky/-/ky-1.5.0.tgz#fa2c9c11c175a6d0072e572216207a4edc895d10"
-  integrity sha512-bkQo+UqryW6Zmo/DsixYZE4Z9t2mzvNMhceyIhuMuInb3knm5Q+GNGMKveydJAj+Z6piN1SwI6eR/V0G+Z0BtA==
-
 language-subtag-registry@^0.3.20:
   version "0.3.23"
   resolved "https://registry.yarnpkg.com/language-subtag-registry/-/language-subtag-registry-0.3.23.tgz#23529e04d9e3b74679d70142df3fd2eb6ec572e7"
@@ -13434,13 +13211,6 @@ latest-version@^7.0.0:
   dependencies:
     package-json "^8.1.0"
 
-latest-version@^9.0.0:
-  version "9.0.0"
-  resolved "https://registry.yarnpkg.com/latest-version/-/latest-version-9.0.0.tgz#e91ed216e7a4badc6f73b66c65adb46c58ec6ba1"
-  integrity sha512-7W0vV3rqv5tokqkBAFV1LbR7HPOWzXQDpDgEuib/aJ1jsZZx6x3c2mBI+TJhJzOhkGeaLbCKEHXEXLfirtG2JA==
-  dependencies:
-    package-json "^10.0.0"
-
 launch-editor@^2.6.0:
   version "2.6.1"
   resolved "https://registry.npmjs.org/launch-editor/-/launch-editor-2.6.1.tgz"
@@ -15329,16 +15099,6 @@ package-json-from-dist@^1.0.0:
   resolved "https://registry.yarnpkg.com/package-json-from-dist/-/package-json-from-dist-1.0.0.tgz#e501cd3094b278495eb4258d4c9f6d5ac3019f00"
   integrity sha512-dATvCeZN/8wQsGywez1mzHtTlP22H8OEfPrVMLNr4/eGa+ijtLn/6M5f0dY8UKNrC2O9UCU6SSoG3qRKnt7STw==
 
-package-json@^10.0.0:
-  version "10.0.1"
-  resolved "https://registry.yarnpkg.com/package-json/-/package-json-10.0.1.tgz#e49ee07b8de63b638e7f1b5bb353733e428fe7d7"
-  integrity sha512-ua1L4OgXSBdsu1FPb7F3tYH0F48a6kxvod4pLUlGY9COeJAJQNX/sNH2IiEmsxw7lqYiAwrdHMjz1FctOsyDQg==
-  dependencies:
-    ky "^1.2.0"
-    registry-auth-token "^5.0.2"
-    registry-url "^6.0.1"
-    semver "^7.6.0"
-
 package-json@^8.1.0:
   version "8.1.1"
   resolved "https://registry.npmjs.org/package-json/-/package-json-8.1.1.tgz"
@@ -17202,14 +16962,14 @@ regexpu-core@^5.3.1:
     unicode-match-property-ecmascript "^2.0.0"
     unicode-match-property-value-ecmascript "^2.1.0"
 
-registry-auth-token@^5.0.1, registry-auth-token@^5.0.2:
+registry-auth-token@^5.0.1:
   version "5.0.2"
   resolved "https://registry.npmjs.org/registry-auth-token/-/registry-auth-token-5.0.2.tgz"
   integrity sha512-o/3ikDxtXaA59BmZuZrJZDJv8NMDGSj+6j6XaeBmHw8eY1i1qd9+6H+LjVvQXx3HN6aRCGa1cUdJ9RaJZUugnQ==
   dependencies:
     "@pnpm/npm-conf" "^2.1.0"
 
-registry-url@^6.0.0, registry-url@^6.0.1:
+registry-url@^6.0.0:
   version "6.0.1"
   resolved "https://registry.npmjs.org/registry-url/-/registry-url-6.0.1.tgz"
   integrity sha512-+crtS5QjFRqFCoQmvGduwYWEBng99ZvmFvF+cUJkGYF1L1BfU8C6Zp9T7f5vPAwyLkUExpvK+ANVZmGU49qi4Q==
@@ -17277,38 +17037,6 @@ release-it@^17.3.0:
     wildcard-match "5.1.3"
     yargs-parser "21.1.1"
 
-release-it@^17.6.0:
-  version "17.6.0"
-  resolved "https://registry.yarnpkg.com/release-it/-/release-it-17.6.0.tgz#de91db313d76849f727a7434f7b8bdb52b6a4ac8"
-  integrity sha512-EE34dtRPL7BHpYQC7E+zAU8kjkyxFHxLk5Iqnmn/5nGcjgOQu34Au29M2V9YvxiP3tZbIlEn4gItEzu7vAPRbw==
-  dependencies:
-    "@iarna/toml" "2.2.5"
-    "@octokit/rest" "20.1.1"
-    async-retry "1.3.3"
-    chalk "5.3.0"
-    cosmiconfig "9.0.0"
-    execa "8.0.1"
-    git-url-parse "14.0.0"
-    globby "14.0.2"
-    got "13.0.0"
-    inquirer "9.3.2"
-    is-ci "3.0.1"
-    issue-parser "7.0.1"
-    lodash "4.17.21"
-    mime-types "2.1.35"
-    new-github-release-url "2.0.0"
-    node-fetch "3.3.2"
-    open "10.1.0"
-    ora "8.0.1"
-    os-name "5.1.0"
-    proxy-agent "6.4.0"
-    semver "7.6.2"
-    shelljs "0.8.5"
-    update-notifier "7.1.0"
-    url-join "5.0.0"
-    wildcard-match "5.1.3"
-    yargs-parser "21.1.1"
-
 remark-directive@^3.0.0:
   version "3.0.0"
   resolved "https://registry.npmjs.org/remark-directive/-/remark-directive-3.0.0.tgz"
@@ -17860,7 +17588,7 @@ semver-diff@^4.0.0:
   resolved "https://registry.npmjs.org/semver/-/semver-5.7.2.tgz"
   integrity sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==
 
-semver@7.6.2, semver@^7.6.0:
+semver@7.6.2:
   version "7.6.2"
   resolved "https://registry.yarnpkg.com/semver/-/semver-7.6.2.tgz#1e3b34759f896e8f14d6134732ce798aeb0c6e13"
   integrity sha512-FNAIBWCx9qcRhoHcgcJ0gvU7SN1lYU2ZXuSfl04bSC5OpvDHFyJCjdNHomPXxjQlCBU67YW64PzY7/VIEH7F2w==
@@ -17877,11 +17605,6 @@ semver@^7.0.0, semver@^7.3.0, semver@^7.3.2, semver@^7.3.5, semver@^7.3.7, semve
   dependencies:
     lru-cache "^6.0.0"
 
-semver@^7.6.2:
-  version "7.6.3"
-  resolved "https://registry.yarnpkg.com/semver/-/semver-7.6.3.tgz#980f7b5550bc175fb4dc09403085627f9eb33143"
-  integrity sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A==
-
 send@0.18.0:
   version "0.18.0"
   resolved "https://registry.npmjs.org/send/-/send-0.18.0.tgz"
@@ -18017,35 +17740,6 @@ shallowequal@^1.1.0:
   resolved "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz"
   integrity sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==
 
-sharp@^0.33.2:
-  version "0.33.4"
-  resolved "https://registry.yarnpkg.com/sharp/-/sharp-0.33.4.tgz#b88e6e843e095c6ab5e1a0c59c4885e580cd8405"
-  integrity sha512-7i/dt5kGl7qR4gwPRD2biwD2/SvBn3O04J77XKFgL2OnZtQw+AG9wnuS/csmu80nPRHLYE9E41fyEiG8nhH6/Q==
-  dependencies:
-    color "^4.2.3"
-    detect-libc "^2.0.3"
-    semver "^7.6.0"
-  optionalDependencies:
-    "@img/sharp-darwin-arm64" "0.33.4"
-    "@img/sharp-darwin-x64" "0.33.4"
-    "@img/sharp-libvips-darwin-arm64" "1.0.2"
-    "@img/sharp-libvips-darwin-x64" "1.0.2"
-    "@img/sharp-libvips-linux-arm" "1.0.2"
-    "@img/sharp-libvips-linux-arm64" "1.0.2"
-    "@img/sharp-libvips-linux-s390x" "1.0.2"
-    "@img/sharp-libvips-linux-x64" "1.0.2"
-    "@img/sharp-libvips-linuxmusl-arm64" "1.0.2"
-    "@img/sharp-libvips-linuxmusl-x64" "1.0.2"
-    "@img/sharp-linux-arm" "0.33.4"
-    "@img/sharp-linux-arm64" "0.33.4"
-    "@img/sharp-linux-s390x" "0.33.4"
-    "@img/sharp-linux-x64" "0.33.4"
-    "@img/sharp-linuxmusl-arm64" "0.33.4"
-    "@img/sharp-linuxmusl-x64" "0.33.4"
-    "@img/sharp-wasm32" "0.33.4"
-    "@img/sharp-win32-ia32" "0.33.4"
-    "@img/sharp-win32-x64" "0.33.4"
-
 shebang-command@^2.0.0:
   version "2.0.0"
   resolved "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz"
@@ -18116,13 +17810,6 @@ signal-exit@^4.0.1, signal-exit@^4.1.0:
   resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-4.1.0.tgz#952188c1cbd546070e2dd20d0f41c0ae0530cb04"
   integrity sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==
 
-simple-swizzle@^0.2.2:
-  version "0.2.2"
-  resolved "https://registry.yarnpkg.com/simple-swizzle/-/simple-swizzle-0.2.2.tgz#a4da6b635ffcccca33f70d17cb92592de95e557a"
-  integrity sha512-JA//kQgZtbuY83m+xT+tXJkmJncGMTFT+C+g2h2R9uxkYIrE2yy9sgmcLhCnw57/WSD+Eh3J97FPEDFnbXnDUg==
-  dependencies:
-    is-arrayish "^0.3.1"
-
 sirv@^2.0.3:
   version "2.0.4"
   resolved "https://registry.npmjs.org/sirv/-/sirv-2.0.4.tgz"
@@ -19691,24 +19378,6 @@ update-notifier@7.0.0:
     semver-diff "^4.0.0"
     xdg-basedir "^5.1.0"
 
-update-notifier@7.1.0:
-  version "7.1.0"
-  resolved "https://registry.yarnpkg.com/update-notifier/-/update-notifier-7.1.0.tgz#b8f43cc2dc094c221f179bfab9eba9f4b1469965"
-  integrity sha512-8SV3rIqVY6EFC1WxH6L0j55s0MO79MFBS1pivmInRJg3pCEDgWHBj1Q6XByTtCLOZIFA0f6zoG9ZWf2Ks9lvTA==
-  dependencies:
-    boxen "^7.1.1"
-    chalk "^5.3.0"
-    configstore "^6.0.0"
-    import-lazy "^4.0.0"
-    is-in-ci "^0.1.0"
-    is-installed-globally "^1.0.0"
-    is-npm "^6.0.0"
-    latest-version "^9.0.0"
-    pupa "^3.1.0"
-    semver "^7.6.2"
-    semver-diff "^4.0.0"
-    xdg-basedir "^5.1.0"
-
 update-notifier@^6.0.2:
   version "6.0.2"
   resolved "https://registry.npmjs.org/update-notifier/-/update-notifier-6.0.2.tgz"
@@ -20938,11 +20607,6 @@ yocto-queue@^1.0.0:
   resolved "https://registry.npmjs.org/yocto-queue/-/yocto-queue-1.0.0.tgz"
   integrity sha512-9bnSc/HEW2uRy67wc+T8UwauLuPJVn28jb+GtJY16iiKWyvmYJRXVT4UamsAEGQfPohgr2q4Tq0sQbQlxTfi1g==
 
-yoctocolors-cjs@^2.1.1:
-  version "2.1.2"
-  resolved "https://registry.yarnpkg.com/yoctocolors-cjs/-/yoctocolors-cjs-2.1.2.tgz#f4b905a840a37506813a7acaa28febe97767a242"
-  integrity sha512-cYVsTjKl8b+FrnidjibDWskAv7UKOfcwaVZdp/it9n1s9fU3IkgDbhdIRKCW4JDsAlECJY0ytoVPT3sK6kideA==
-
 zwitch@^2.0.0:
   version "2.0.4"
   resolved "https://registry.npmjs.org/zwitch/-/zwitch-2.0.4.tgz"