diff --git a/requirements.txt b/requirements.txt
new file mode 100644
index 00000000..e69de29b
diff --git a/zt_frontend/src/App.vue b/zt_frontend/src/App.vue
index b84d6621..ecc3f57e 100644
--- a/zt_frontend/src/App.vue
+++ b/zt_frontend/src/App.vue
@@ -338,21 +338,21 @@ import { NotebookNameRequest } from "./types/notebook_name_request";
 import { Notebook, CodeCell, Layout, ZTComponent } from "./types/notebook";
 import { Dependencies } from "./types/notebook_response";
 import { DependencyOutput } from "./static-types/dependency_ouput";
-import CodeComponent from "@/components/CodeComponent.vue";
-import MarkdownComponent from "@/components/MarkdownComponent.vue";
-import EditorComponent from "@/components/EditorComponent.vue";
-import SQLComponent from "@/components/SQLComponent.vue";
-import PackageComponent from "@/components/PackageComponent.vue";
+import CodeComponent from "@/components/cells/code/CodeComponent.vue";
+import MarkdownComponent from "@/components/cells/markdown/MarkdownComponent.vue";
+import EditorComponent from "@/components/cells/text/EditorComponent.vue";
+import SQLComponent from "@/components/cells/sql/SQLComponent.vue";
+import PackageComponent from "@/components/plugins/PackageComponent.vue";
 import Comments from "@/components/comments/Comments.vue";
-import CodeCellManager from "./components/CodeCellManager.vue";
-import CopilotComponent from "./components/CopilotComponent.vue";
-import ShareComponent from "./components/ShareComponent.vue";
+import CodeCellManager from "@/components/cells/base/CodeCellManager.vue";
+import CopilotComponent from "@/components/plugins/CopilotComponent.vue";
+import ShareComponent from "@/components/plugins/ShareComponent.vue";
 import type { VTextField } from "vuetify/lib/components/index.mjs";
 import { ztAliases } from "@/iconsets/ztIcon";
 import { Timer } from "@/timer";
 import { globalState } from "@/global_vars";
 import { DependencyRequest } from "./types/dependency_request";
-import SidebarComponent from "@/components/FileExplorer.vue";
+import SidebarComponent from "@/components/file-system/FileExplorer.vue";
 import { WebSocketManager } from "@/websocket_manager";
 import { useCommentsStore } from "@/stores/comments";
 
diff --git a/zt_frontend/src/components/Cell.vue b/zt_frontend/src/components/Cell.vue
deleted file mode 100644
index 143dc630..00000000
--- a/zt_frontend/src/components/Cell.vue
+++ /dev/null
@@ -1,583 +0,0 @@
-<template>
-  <v-card
-    v-if="isDevMode || (!isDevMode && !hideCellValue)"
-    :id="'codeCard' + cellId"
-    :class="['cell', { 'cell--dev': isDevMode }]"
-    color="bluegrey-darken-4"
-    width="100%"
-    @mouseenter="showHeader = true"
-    @mouseleave="showHeader = false"
-  >
-    <v-divider
-      class="indicator"
-      vertical
-      :color="dividerColor"
-      :thickness="4"
-    ></v-divider>
-    <div class="content">
-      <header v-if=" isFocused || isMenuOpen || showHeader" class="header">
-        <div class="click-edit" v-if="isDevMode && keepCodeInAppModel">
-          <div class="click-edit__show-text" v-if="!editingCellName">
-            <div class="loading-wrapper">
-              <v-progress-circular
-                v-if="cellId == currentlyExecutingCell && isCodeRunning"
-                indeterminate
-                size="24"
-                class="ml-1 mr-2 green-loader"
-              />
-            </div>
-            <h4
-              class="text-bluegrey-darken-1 text-ellipsis click-edit__name"
-              @click="toggleCellName"
-            >
-              {{ cellNameValue }}
-            </h4>
-
-            <!-- <v-btn
-              v-if="isDevMode"
-              color="bluegrey-darken-4"
-              :icon="`ztIcon:${ztAliases.edit}`"
-              size="x-small"
-              class="text-bluegrey-darken-1"
-              @click="toggleCellName"
-            /> -->
-          </div>
-
-          <div class="click-edit__edit-field-wrapper" v-if="editingCellName">
-            <v-text-field
-              v-model="cellNameEditValue"
-              :placeholder="cellType"
-              density="compact"
-              variant="plain"
-              hide-details
-              ref="cellNameField"
-              class="click-edit__edit-field"
-              @keydown.enter="saveCellName"
-              @update:focused="
-                (focused:any) => {
-                  if (!focused) saveCellName();
-                }
-              "
-            />
-            <!-- <v-btn
-              color="bluegrey-darken-4"
-              :icon="`ztIcon:${ztAliases.save}`"
-              size="x-small"
-              @click="saveCellName"
-            /> -->
-            <!-- <v-btn
-              color="bluegrey-darken-4"
-              icon="$close"
-              size="x-small"
-              @click="toggleCellName"
-            /> -->
-          </div>
-        </div>
-        <h4
-          v-else-if="isDevMode"
-          class="text-bluegrey-darken-1 text-ellipsis click-edit__static-name"
-        >
-          {{ cellNameValue }}
-        </h4>
-        <slot v-else-if="keepCodeInAppModel" name="header-title"></slot>
-        <v-spacer v-else></v-spacer>
-        <v-defaults-provider
-          :defaults="{
-            VIcon: {
-              color: 'bluegrey',
-            },
-            VBtn: {
-              variant: 'text',
-              size: 'small',
-            },
-          }"
-        >
-          <div class="actions">
-            <!-- <v-btn icon="$message"></v-btn> -->
-            <v-btn
-              v-if="isDevMode && showSaveBtn"
-              :icon="`ztIcon:${ztAliases.save}`"
-              @click="$emit('save')"
-            ></v-btn>
-
-            <v-btn
-              v-if="isDevMode && showPlayBtn"
-              :id="'runCode' + cellId"
-              :icon="`ztIcon:${ztAliases.play}`"
-              @click="$emit('play')"
-            ></v-btn>
-            <v-btn
-              v-if="globalState.comments_enabled"
-              :class="[
-                'message-btn',
-                'pa-0',
-                {
-                  'message-btn--alert': numberOfComments,
-                },
-              ]"
-              @click="
-                commentsStore.showCommentsPerCell({
-                  cellId,
-                  cellName: cellNameValue,
-                  cellType,
-                })
-              "
-              :ripple="false"
-              slim
-              rounded="circle"
-            >
-              <template #default>
-                <v-icon
-                  v-if="numberOfComments === 0"
-                  size="x-large"
-                  :icon="`ztIcon:${ztAliases.message}`"
-                ></v-icon>
-                <span v-else class="text-primary message-btn__counter">{{
-                  numberOfComments
-                }}</span>
-              </template>
-            </v-btn>
-            <v-menu v-if="isDevMode" :close-on-content-click="false" v-model="isMenuOpen"
-            >
-              <template v-slot:activator="{ props }">
-                <v-btn
-                  :icon="`ztIcon:${ztAliases.more}`"
-                  :id="'cellToolbar' + cellId"
-                  v-bind="props"
-                ></v-btn>
-              </template>
-              <v-list bg-color="bluegrey-darken-4">
-                <v-list-item
-                  v-if="keepCodeInAppModel"
-                  :id="'updateCellReactivity' + cellId"
-                >
-                  <template v-slot:prepend>
-                    <v-switch
-                      v-model="nonReactiveValue"
-                      @update:modelValue="updateReactivity"
-                    ></v-switch>
-                  </template>
-                  <v-list-item-title>Non-Reactive</v-list-item-title>
-                </v-list-item>
-                <v-list-item :id="'hideCell' + cellId">
-                  <template v-slot:prepend>
-                    <v-switch
-                      v-model="hideCellValue"
-                      @update:modelValue="updateHideCell"
-                      :id="'hideCellSwitch' + cellId"
-                    ></v-switch>
-                  </template>
-                  <v-list-item-title>Hide Cell</v-list-item-title>
-                </v-list-item>
-                <v-list-item
-                  v-if="keepCodeInAppModel"
-                  :id="'expandCode' + cellId"
-                >
-                  <template v-slot:prepend>
-                    <v-switch
-                      v-model="hideCodeValue"
-                      @update:modelValue="updateHideCode"
-                    ></v-switch>
-                  </template>
-                  <v-list-item-title>Hide Code</v-list-item-title>
-                </v-list-item>
-                <v-list-item
-                  v-if="keepCodeInAppModel"
-                  :id="'expandCode' + cellId"
-                >
-                  <template v-slot:prepend>
-                    <v-switch
-                      v-model="expandCodeValue"
-                      @update:modelValue="updateExpandCode"
-                    ></v-switch>
-                  </template>
-                  <v-list-item-title>Expand Code</v-list-item-title>
-                </v-list-item>
-                <v-list-item
-                  v-if="cellType === 'sql'"
-                  :id="'updateShowTable' + cellId"
-                >
-                  <template v-slot:prepend>
-                    <v-switch
-                      v-model="showTableValue"
-                      @update:modelValue="updateShowTable"
-                    ></v-switch>
-                  </template>
-                  <v-list-item-title>Show Table</v-list-item-title>
-                </v-list-item>
-                <!-- <v-list-item>
-                  <template v-slot:prepend>
-                    <v-icon icon="$collapse"></v-icon>
-                  </template>
-                  <v-list-item-title>Move Up</v-list-item-title>
-                </v-list-item>
-                <v-list-item>
-                  <template v-slot:prepend>
-                    <v-icon icon="$expand"></v-icon>
-                  </template>
-                  <v-list-item-title>Move Down</v-list-item-title>
-                </v-list-item>
-                <v-list-item>
-                  <template v-slot:prepend>
-                    <v-icon :icon="`ztIcon:${ztAliases.duplicate}`"></v-icon>
-                  </template>
-                  <v-list-item-title>Duplicate</v-list-item-title>
-                </v-list-item> -->
-                <v-list-item
-                  base-color="error"
-                  :id="'deleteCell' + cellId"
-                  class="delete-cell"
-                  @click="$emit('delete')"
-                >
-                  <template v-slot:prepend>
-                    <v-icon :icon="`ztIcon:${ztAliases.delete}`"></v-icon>
-                  </template>
-                  <v-list-item-title>Delete Cell</v-list-item-title>
-                </v-list-item>
-              </v-list>
-            </v-menu>
-          </div>
-        </v-defaults-provider>
-      </header>
-      <div
-        :class="['code', { 'code--dev': isDevMode }]"
-        v-if="isDevMode || (!isDevMode && keepCodeInAppModel)"
-      >
-        <slot name="code"></slot>
-      </div>
-      <div
-        :class="['outcome', { 'outcome--dev': isDevMode }]"
-        v-if="!(isDevMode && !isAppRoute && cellType === 'text') && cellHasOutput"
-      >
-        <slot name="outcome"></slot>
-      </div>
-    </div>
-    <v-tooltip v-if="nonReactiveValue" text="Cell is Stale">
-      <template v-slot:activator="{ props }">
-        <v-divider
-          v-bind="props"
-          class="indicator"
-          vertical
-          color="warning"
-          :thickness="8"
-        />
-      </template>
-    </v-tooltip>
-  </v-card>
-  <add-cell
-    v-if="isDevMode"
-    :cell-id="cellId"
-    @createCodeCell="(e) => $emit('addCell', e)"
-    
-  />
-</template>
-<script setup lang="ts">
-import axios from "axios";
-import { computed, PropType, nextTick, ref, toRef } from "vue";
-import type { Celltype } from "@/types/create_request";
-import { ztAliases } from "@/iconsets/ztIcon";
-import { useRoute } from "vue-router";
-import type { VTextField } from "vuetify/lib/components/index.mjs";
-import AddCell from "@/components/AddCell.vue";
-import { HideCellRequest } from "@/types/hide_cell_request";
-import { HideCodeRequest } from "@/types/hide_code_request";
-import { ExpandCodeRequest } from "@/types/expand_code_request";
-import { CellReactivityRequest } from "@/types/cell_reactivity_request";
-import { ShowTableRequest } from "@/types/show_table_request";
-import { NameCellRequest } from "@/types/name_cell_request";
-import { useCellType } from "@/composables/cell-type";
-import { globalState } from "@/global_vars";
-
-import { useCommentsStore } from "@/stores/comments";
-
-const commentsStore = useCommentsStore();
-const { commentsByCell } = storeToRefs(commentsStore);
-
-const numberOfComments = computed(() => commentsByCell.value(props.cellId!));
-
-const props = defineProps({
-  isDevMode: Boolean,
-  cellType: {
-    type: String as PropType<Celltype>,
-    default: "code",
-  },
-  cellId: String,
-  error: Boolean,
-  hideCell: {
-    type: Boolean,
-    default: false,
-  },
-  hideCode: {
-    type: Boolean,
-    default: false,
-  },
-  expandCode: {
-    type: Boolean,
-    default: false,
-  },
-  nonReactive: {
-    type: Boolean,
-    default: false,
-  },
-  showTable: {
-    type: Boolean,
-    default: false,
-  },
-  cellName: {
-    type: String,
-    default: null,
-  },
-
-  currentlyExecutingCell: {
-    type: String,
-    default: null,
-  },
-  isCodeRunning: {
-    type: Boolean,
-    default: false,
-  },
-  cellHasOutput:{
-    type: Boolean,
-    default:false
-  },
-  isFocused: {
-    type: Boolean,
-    default: false,
-  },
-});
-const emits = defineEmits<{
-  (e: "delete"): void;
-  (e: "play"): void;
-  (e: "save"): void;
-  (e: "expandCodeUpdate", expand: Boolean): void;
-  (e: "updateReactivity", expand: Boolean): void;
-  (e: "updateShowTable", expand: Boolean): void;
-  (e: "hideCode", hideCode: Boolean): void;
-  (e: "addCell", cellType: Celltype): void;
-  (e: "renameCell", cellName: String): void;
-}>();
-
-const { cellTypeColor: dividerColor } = useCellType(
-  toRef(props.cellType),
-  toRef(props.error)
-);
-
-const hideCellValue = ref(props.hideCell || false);
-const hideCodeValue = ref(props.hideCode || false);
-const expandCodeValue = ref(props.expandCode || false);
-const nonReactiveValue = ref(props.nonReactive || false);
-const showTableValue = ref(props.showTable || false);
-const cellNameValue = ref(props.cellName || props.cellType);
-const cellNameEditValue = ref("");
-const cellNameField = ref(null);
-const editingCellName = ref(false);
-const showHeader = ref(false);
-const isMenuOpen = ref(false);
-
-watch(() => props.isFocused, (newValue) => {
-  if (!newValue) {
-    showHeader.value = false;
-  }
-}, { immediate: true });
-
-const showPlayBtn = computed(
-  () => props.cellType === "code" || props.cellType === "sql"
-);
-const showSaveBtn = computed(
-  () => props.cellType === "markdown" || props.cellType === "text"
-);
-const keepCodeInAppModel = computed(
-  () => props.cellType === "code" || props.cellType === "sql"
-);
-const isAppRoute = computed(() => useRoute().name === "/app");
-
-const updateHideCell = async (value: unknown) => {
-  const hideCodeRequest: HideCellRequest = {
-    cellId: props.cellId as string,
-    hideCell: value as boolean,
-  };
-  await axios.post(
-    import.meta.env.VITE_BACKEND_URL + "api/hide_cell",
-    hideCodeRequest
-  );
-};
-const updateHideCode = async (value: unknown) => {
-  const hideCodeRequest: HideCodeRequest = {
-    cellId: props.cellId as string,
-    hideCode: value as boolean,
-  };
-  await axios.post(
-    import.meta.env.VITE_BACKEND_URL + "api/hide_code",
-    hideCodeRequest
-  );
-  emits("hideCode", value as boolean);
-};
-const updateExpandCode = async (value: unknown) => {
-  const expandCodeRequest: ExpandCodeRequest = {
-    cellId: props.cellId as string,
-    expandCode: value as boolean,
-  };
-  await axios.post(
-    import.meta.env.VITE_BACKEND_URL + "api/expand_code",
-    expandCodeRequest
-  );
-  emits("expandCodeUpdate", value as boolean);
-};
-const updateReactivity = async (value: unknown) => {
-  const cellReactivityRequest: CellReactivityRequest = {
-    cellId: props.cellId as string,
-    nonReactive: value as boolean,
-  };
-  await axios.post(
-    import.meta.env.VITE_BACKEND_URL + "api/cell_reactivity",
-    cellReactivityRequest
-  );
-  emits("updateReactivity", value as boolean);
-};
-const updateShowTable = async (value: unknown) => {
-  const showTableRequest: ShowTableRequest = {
-    cellId: props.cellId as string,
-    showTable: value as boolean,
-  };
-  await axios.post(
-    import.meta.env.VITE_BACKEND_URL + "api/show_table",
-    showTableRequest
-  );
-  emits("updateShowTable", value as boolean);
-};
-
-const toggleCellName = () => {
-  editingCellName.value = !editingCellName.value;
-  if (editingCellName.value) {
-    cellNameEditValue.value = cellNameValue.value as string;
-    nextTick(() => {
-      if (cellNameField.value) {
-        (cellNameField.value as VTextField).focus();
-      }
-    });
-  }
-};
-
-const saveCellName = async () => {
-  const nameCellRequest: NameCellRequest = {
-    cellId: props.cellId as string,
-    cellName: cellNameEditValue.value as string,
-  };
-  await axios.post(
-    import.meta.env.VITE_BACKEND_URL + "api/rename_cell",
-    nameCellRequest
-  );
-  cellNameValue.value = cellNameEditValue.value;
-  editingCellName.value = false;
-  emits("renameCell", cellNameValue.value);
-};
-</script>
-
-<style lang="scss" scoped>
-.cell {
-  padding: 5px;
-  display: flex;
-  margin-bottom: 2px;
-  width: 100%;
-  &--dev {
-    margin-bottom: 6px;
-  }
-}
-.message-btn {
-  &--alert {
-    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSIjQUU5RkU4Ij48cGF0aCBkPSJNMTMuMzA1IDIyLjVMMTIgMjEuNzVMMTUgMTYuNUgxOS41QzE5Ljg5NzggMTYuNSAyMC4yNzk0IDE2LjM0MiAyMC41NjA3IDE2LjA2MDdDMjAuODQyIDE1Ljc3OTQgMjEgMTUuMzk3OCAyMSAxNVY2QzIxIDUuNjAyMTggMjAuODQyIDUuMjIwNjQgMjAuNTYwNyA0LjkzOTM0QzIwLjI3OTQgNC42NTgwNCAxOS44OTc4IDQuNSAxOS41IDQuNUg0LjVDNC4xMDIxOCA0LjUgMy43MjA2NCA0LjY1ODA0IDMuNDM5MzQgNC45MzkzNEMzLjE1ODA0IDUuMjIwNjQgMyA1LjYwMjE4IDMgNlYxNUMzIDE1LjM5NzggMy4xNTgwNCAxNS43Nzk0IDMuNDM5MzQgMTYuMDYwN0MzLjcyMDY0IDE2LjM0MiA0LjEwMjE4IDE2LjUgNC41IDE2LjVIMTEuMjVWMThINC41QzMuNzA0MzUgMTggMi45NDEyOSAxNy42ODM5IDIuMzc4NjggMTcuMTIxM0MxLjgxNjA3IDE2LjU1ODcgMS41IDE1Ljc5NTYgMS41IDE1VjZDMS41IDUuMjA0MzUgMS44MTYwNyA0LjQ0MTI5IDIuMzc4NjggMy44Nzg2OEMyLjk0MTI5IDMuMzE2MDcgMy43MDQzNSAzIDQuNSAzSDE5LjVDMjAuMjk1NiAzIDIxLjA1ODcgMy4zMTYwNyAyMS42MjEzIDMuODc4NjhDMjIuMTgzOSA0LjQ0MTI5IDIyLjUgNS4yMDQzNSAyMi41IDZWMTVDMjIuNSAxNS43OTU2IDIyLjE4MzkgMTYuNTU4NyAyMS42MjEzIDE3LjEyMTNDMjEuMDU4NyAxNy42ODM5IDIwLjI5NTYgMTggMTkuNSAxOEgxNS44N0wxMy4zMDUgMjIuNVoiIGZpbGw9IiNBRTlGRTgiLz48L3N2Zz4=");
-    background-position: center;
-    background-repeat: no-repeat;
-    transition: none;
-  }
-  &__counter {
-    margin-bottom: 4px;
-  }
-}
-.delete-cell:hover {
-  background-color: #6e3d41;
-}
-
-.content {
-  flex: 1;
-  margin-left: 16px;
-  margin-right: 0px;
-  width: calc(100% - 36px);
-}
-
-.indicator {
-  border-radius: 4px;
-}
-
-.header {
-  display: flex;
-  justify-content: space-between;
-  margin-bottom: 2px;
-}
-
-.code,
-.outcome {
-  padding: 0px;
-  &--dev {
-    border: 1px solid rgba(var(--v-theme-bluegrey));
-    border-radius: 3px;
-    padding: 6px;
-  }
-}
-
-.code {
-  margin-bottom: 10px;
-}
-
-.click-edit {
-  width: calc(100% - 135px);
-  &__name {
-    cursor: text;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-  &__show-text,
-  &__edit-field-wrapper {
-    height: 100%;
-    display: flex;
-    align-items: center;
-  }
-  &__name:hover {
-    cursor: text;
-    padding-left: 3px;
-    padding-right: 3px;
-    border: 1px solid #294455;
-  }
-
-  &__static-name {
-    cursor: text;
-    font-weight: normal;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
-  &__edit-field {
-    margin-top: -11px;
-    & :deep(.v-field__input) {
-      font-size: 1rem;
-      letter-spacing: normal;
-    }
-  }
-  .actions {
-    display: flex;
-    align-items: center;
-  }
-
-  .loading-wrapper {
-    display: flex;
-    align-items: center;
-    margin-right: 8px;
-  }
-
-  .green-loader {
-    color: rgba(var(--v-theme-success));
-  }
-}
-</style>
diff --git a/zt_frontend/src/components/AddCell.vue b/zt_frontend/src/components/cells/base/AddCell.vue
similarity index 100%
rename from zt_frontend/src/components/AddCell.vue
rename to zt_frontend/src/components/cells/base/AddCell.vue
diff --git a/zt_frontend/src/components/cells/base/Cell.vue b/zt_frontend/src/components/cells/base/Cell.vue
new file mode 100644
index 00000000..c05bdb21
--- /dev/null
+++ b/zt_frontend/src/components/cells/base/Cell.vue
@@ -0,0 +1,165 @@
+<template>
+  <v-card
+    v-if="isDevMode || (!isDevMode && !hideCellValue)"
+    :id="'codeCard' + cellId"
+    :class="['cell', { 'cell--dev': isDevMode }]"
+    color="bluegrey-darken-4"
+    width="100%"
+    @mouseenter="showHeader = true"
+    @mouseleave="showHeader = false"
+  >
+    <v-divider
+      class="indicator"
+      vertical
+      :color="dividerColor"
+      :thickness="4"
+    ></v-divider>
+    <div class="content">
+      <CellHeader
+        :is-dev-mode="isDevMode"
+        :cell-type="cellType"
+        :cell-id="cellId"
+        :hide-cell="hideCell"
+        :hide-code="hideCode"
+        :expand-code="expandCode"
+        :non-reactive="nonReactive"
+        :show-table="showTable"
+        :cell-name="cellName"
+        :currently-executing-cell="currentlyExecutingCell"
+        :is-code-running="isCodeRunning"
+        :is-focused="isFocused"
+        :show-header="showHeader"
+        @delete="$emit('delete')"
+        @play="$emit('play')"
+        @save="$emit('save')"
+        @expand-code-update="$emit('expandCodeUpdate', $event)"
+        @update-reactivity="$emit('updateReactivity', $event)"
+        @update-show-table="$emit('updateShowTable', $event)"
+        @hide-code="$emit('hideCode', $event)"
+        @rename-cell="$emit('renameCell', $event)"
+        @update-header="showHeader = $event"
+      >
+        <template #header-title>
+          <slot name="header-title"></slot>
+        </template>
+      </CellHeader>
+      
+      <div
+        :class="['code', { 'code--dev': isDevMode }]"
+        v-if="isDevMode || (!isDevMode && keepCodeInAppModel)"
+      >
+        <slot name="code"></slot>
+      </div>
+      <div
+        :class="['outcome', { 'outcome--dev': isDevMode }]"
+        v-if="!(isDevMode && !isAppRoute && cellType === 'text') && cellHasOutput"
+      >
+        <slot name="outcome"></slot>
+      </div>
+    </div>
+    <v-tooltip v-if="nonReactiveValue" text="Cell is Stale">
+      <template v-slot:activator="{ props }">
+        <v-divider
+          v-bind="props"
+          class="indicator"
+          vertical
+          color="warning"
+          :thickness="8"
+        />
+      </template>
+    </v-tooltip>
+  </v-card>
+  <add-cell
+    v-if="isDevMode"
+    :cell-id="cellId"
+    @createCodeCell="(e) => $emit('addCell', e)"
+  />
+</template>
+<script setup lang="ts">
+import { computed, PropType, toRef } from "vue";
+import type { Celltype } from "@/types/create_request";
+import AddCell from "./AddCell.vue";
+import CellHeader from "./CellHeader.vue";
+import { useCellType } from "@/composables/CellComponent/cell-type";
+import { useCellState } from "@/composables/CellComponent/cell-state";
+import { useRouteHelpers } from "@/composables/CellComponent/route-helpers";
+
+const props = defineProps({
+  isDevMode: Boolean,
+  cellType: {
+    type: String as PropType<Celltype>,
+    default: "code",
+  },
+  cellId: {
+    type: String,
+    required: true,
+  },
+  error: Boolean,
+  hideCell: {
+    type: Boolean,
+    default: false,
+  },
+  hideCode: {
+    type: Boolean,
+    default: false,
+  },
+  expandCode: {
+    type: Boolean,
+    default: false,
+  },
+  nonReactive: {
+    type: Boolean,
+    default: false,
+  },
+  showTable: {
+    type: Boolean,
+    default: false,
+  },
+  cellName: {
+    type: String,
+    default: null,
+  },
+  currentlyExecutingCell: {
+    type: String,
+    default: null,
+  },
+  isCodeRunning: {
+    type: Boolean,
+    default: false,
+  },
+  cellHasOutput: {
+    type: Boolean,
+    default: false,
+  },
+  isFocused: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const emits = defineEmits<{
+  (e: "delete"): void;
+  (e: "play"): void;
+  (e: "save"): void;
+  (e: "expandCodeUpdate", expand: Boolean): void;
+  (e: "updateReactivity", expand: Boolean): void;
+  (e: "updateShowTable", expand: Boolean): void;
+  (e: "hideCode", hideCode: Boolean): void;
+  (e: "addCell", cellType: Celltype): void;
+  (e: "renameCell", cellName: String): void;
+}>();
+
+// Composables
+const { cellTypeColor: dividerColor } = useCellType(toRef(props.cellType), toRef(props.error));
+const { showHeader, hideCellValue, nonReactiveValue } = useCellState(
+  toRef(props.hideCell),
+  toRef(props.nonReactive)
+);
+const { isAppRoute } = useRouteHelpers();
+
+const keepCodeInAppModel = computed(() => props.cellType === "code" || props.cellType === "sql");
+</script>
+
+<style lang="scss" scoped>
+@import '@/styles/cell.scss';
+</style>
\ No newline at end of file
diff --git a/zt_frontend/src/components/cells/base/CellActionButtons.vue b/zt_frontend/src/components/cells/base/CellActionButtons.vue
new file mode 100644
index 00000000..cfeed03b
--- /dev/null
+++ b/zt_frontend/src/components/cells/base/CellActionButtons.vue
@@ -0,0 +1,79 @@
+<template>
+  <div class="actions">
+    <v-btn
+      v-if="isDevMode && showSaveBtn"
+      :icon="`ztIcon:${ztAliases.save}`"
+      @click="$emit('save')"
+    ></v-btn>
+
+    <v-btn
+      v-if="isDevMode && showPlayBtn"
+      :id="'runCode' + cellId"
+      :icon="`ztIcon:${ztAliases.play}`"
+      @click="$emit('play')"
+    ></v-btn>
+    
+    <v-btn
+      v-if="commentsEnabled"
+      :class="[{ 'message-btn--alert': numberOfComments }]"
+      @click="showComments"
+      :ripple="false"
+      slim
+      rounded="circle"
+    >
+      <template #default>
+        <v-icon
+          v-if="numberOfComments === 0"
+          size="x-large"
+          :icon="`ztIcon:${ztAliases.message}`"
+        ></v-icon>
+        <span v-else class="text-primary message-btn__counter">{{
+          numberOfComments
+        }}</span>
+      </template>
+    </v-btn>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { ztAliases } from "@/iconsets/ztIcon";
+import { globalState } from "@/global_vars";
+import { useCommentsStore } from "@/stores/comments";
+import { storeToRefs } from "pinia";
+import { Celltype } from "@/types/notebook"; // Import the correct Celltype
+
+// Define props with stricter type constraints
+const props = defineProps({
+  isDevMode: { type: Boolean, required: true },
+  cellType: { type: String as () => Celltype, required: true }, // Celltype validation
+  cellId: { type: String, required: true },
+  cellName: { type: String, required: true },
+});
+
+// Define emitted events
+const emit = defineEmits(['save', 'play']);
+
+// Store reference
+const commentsStore = useCommentsStore();
+const { commentsByCell } = storeToRefs(commentsStore);
+
+// Computed properties
+const numberOfComments = computed(() => commentsByCell.value(props.cellId));
+const showPlayBtn = computed(() => props.cellType === "code" || props.cellType === "sql");
+const showSaveBtn = computed(() => props.cellType === "markdown" || props.cellType === "text");
+const commentsEnabled = computed(() => globalState.comments_enabled);
+
+// Function to show comments
+const showComments = () => {
+  commentsStore.showCommentsPerCell({
+    cellId: props.cellId,
+    cellName: props.cellName,
+    cellType: props.cellType as Celltype,
+  });
+};
+</script>
+
+<style lang="scss" scoped>
+@import '@/styles/cell.scss';
+</style>
\ No newline at end of file
diff --git a/zt_frontend/src/components/cells/base/CellHeader.vue b/zt_frontend/src/components/cells/base/CellHeader.vue
new file mode 100644
index 00000000..67fb5209
--- /dev/null
+++ b/zt_frontend/src/components/cells/base/CellHeader.vue
@@ -0,0 +1,119 @@
+<template>
+  <header v-if="isFocused || isMenuOpen || showHeader" class="header">
+    <CellNameEditor
+      v-model="cellNameValue"
+      :is-dev-mode="isDevMode"
+      :keep-code-in-app-model="keepCodeInAppModel"
+      :cell-id="cellId!"
+      :cell-type="cellType!"
+      :currently-executing-cell="currentlyExecutingCell || ''"
+      :is-code-running="isCodeRunning"
+    />
+    <slot v-if="!isDevMode && keepCodeInAppModel" name="header-title"></slot>
+    <v-spacer v-else></v-spacer>
+
+    <v-defaults-provider
+      :defaults="{
+        VIcon: {
+          color: 'bluegrey',
+        },
+        VBtn: {
+          variant: 'text',
+          size: 'small',
+        },
+      }"
+    >
+      <CellActionButtons
+        :is-dev-mode="isDevMode"
+        :cell-type="cellType!"
+        :cell-id="cellId!"
+        :cell-name="cellNameValue"
+        @save="$emit('save')"
+        @play="$emit('play')"
+      />
+
+      <CellMenu
+        v-if="isDevMode"
+        v-model:is-open="isMenuOpen"
+        :cell-id="cellId!"
+        :cell-type="cellType!"
+        :hide-cell="hideCell"
+        :hide-code="hideCode"
+        :expand-code="expandCode"
+        :non-reactive="nonReactive"
+        :show-table="showTable"
+        :keep-code-in-app-model="keepCodeInAppModel"
+        @update:hide-cell="updateHideCell"
+        @update:hide-code="handleHideCode"
+        @update:expand-code="handleExpandCode"
+        @update:non-reactive="handleReactivity"
+        @update:show-table="handleShowTable"
+        @delete="$emit('delete')"
+      />
+    </v-defaults-provider>
+  </header>
+</template>
+
+<script setup lang="ts">
+import { watch } from 'vue';
+import { useCellHeader } from '@/composables/CellComponent/cell-header';
+import CellNameEditor from './CellNameEditor.vue';
+import CellActionButtons from './CellActionButtons.vue';
+import CellMenu from './CellMenu.vue';
+import { Celltype } from '@/types/notebook'; // Ensure proper import
+
+const props = defineProps({
+  isDevMode: Boolean,
+  cellType: { type: String as () => Celltype, required: true }, // Ensure Celltype conformity
+  cellId: { type: String, required: true },
+  hideCell: Boolean,
+  hideCode: Boolean,
+  expandCode: Boolean,
+  nonReactive: Boolean,
+  showTable: Boolean,
+  cellName: { type: String, default: '' }, // Default for optional props
+  currentlyExecutingCell: { type: String, default: '' },
+  isCodeRunning: Boolean,
+  isFocused: Boolean,
+  showHeader: Boolean,
+  error: Boolean,
+});
+
+const emit = defineEmits([
+  'delete',
+  'play',
+  'save',
+  'expandCodeUpdate',
+  'updateReactivity',
+  'updateShowTable',
+  'hideCode',
+  'updateHeader',
+]);
+
+const {
+  isMenuOpen,
+  cellNameValue,
+  cellTypeColor,
+  cellTypeIcon,
+  keepCodeInAppModel,
+  updateHideCell,
+  handleHideCode,
+  handleExpandCode,
+  handleReactivity,
+  handleShowTable,
+} = useCellHeader(props, emit);
+
+watch(
+  () => props.isFocused,
+  (newValue) => {
+    if (!newValue) {
+      emit('updateHeader', false);
+    }
+  },
+  { immediate: true }
+);
+</script>
+
+<style lang="scss" scoped>
+@import '@/styles/cell.scss';
+</style>
\ No newline at end of file
diff --git a/zt_frontend/src/components/cells/base/CellMenu.vue b/zt_frontend/src/components/cells/base/CellMenu.vue
new file mode 100644
index 00000000..f6363dda
--- /dev/null
+++ b/zt_frontend/src/components/cells/base/CellMenu.vue
@@ -0,0 +1,119 @@
+<template>
+  <v-menu :close-on-content-click="false" v-model="isOpen">
+    <template v-slot:activator="{ props }">
+      <v-btn
+        :icon="`ztIcon:${ztAliases.more}`"
+        :id="'cellToolbar' + cellId"
+        v-bind="props"
+      ></v-btn>
+    </template>
+    
+    <v-list bg-color="bluegrey-darken-4">
+      <v-list-item v-if="keepCodeInAppModel" :id="'updateCellReactivity' + cellId">
+        <template v-slot:prepend>
+          <v-switch
+            v-model="nonReactive"
+            @update:modelValue="updateReactivity"
+          ></v-switch>
+        </template>
+        <v-list-item-title>Non-Reactive</v-list-item-title>
+      </v-list-item>
+
+      <v-list-item :id="'hideCell' + cellId">
+        <template v-slot:prepend>
+          <v-switch
+            v-model="hideCell"
+            @update:modelValue="updateHideCell"
+            :id="'hideCellSwitch' + cellId"
+          ></v-switch>
+        </template>
+        <v-list-item-title>Hide Cell</v-list-item-title>
+      </v-list-item>
+
+      <v-list-item v-if="keepCodeInAppModel" :id="'expandCode' + cellId">
+        <template v-slot:prepend>
+          <v-switch
+            v-model="hideCode"
+            @update:modelValue="updateHideCode"
+          ></v-switch>
+        </template>
+        <v-list-item-title>Hide Code</v-list-item-title>
+      </v-list-item>
+
+      <v-list-item v-if="keepCodeInAppModel" :id="'expandCode' + cellId">
+        <template v-slot:prepend>
+          <v-switch
+            v-model="expandCode"
+            @update:modelValue="updateExpandCode"
+          ></v-switch>
+        </template>
+        <v-list-item-title>Expand Code</v-list-item-title>
+      </v-list-item>
+
+      <v-list-item v-if="cellType === 'sql'" :id="'updateShowTable' + cellId">
+        <template v-slot:prepend>
+          <v-switch
+            v-model="showTable"
+            @update:modelValue="updateShowTable"
+          ></v-switch>
+        </template>
+        <v-list-item-title>Show Table</v-list-item-title>
+      </v-list-item>
+
+      <v-list-item
+        base-color="error"
+        :id="'deleteCell' + cellId"
+        class="delete-cell"
+        @click="$emit('delete')"
+      >
+        <template v-slot:prepend>
+          <v-icon :icon="`ztIcon:${ztAliases.delete}`"></v-icon>
+        </template>
+        <v-list-item-title>Delete Cell</v-list-item-title>
+      </v-list-item>
+    </v-list>
+  </v-menu>
+</template> 
+
+<script setup lang="ts">
+import { useCellMenu, CellMenuProps } from '@/composables/CellComponent/cell-menu';
+
+const props = defineProps({
+  cellId: String,
+  cellType: String,
+  hideCell: Boolean,
+  hideCode: Boolean,
+  expandCode: Boolean,
+  nonReactive: Boolean,
+  showTable: Boolean,
+  keepCodeInAppModel: Boolean
+});
+
+const emit = defineEmits([
+  'delete',
+  'update:hideCell',
+  'update:hideCode',
+  'update:expandCode',
+  'update:nonReactive',
+  'update:showTable',
+  'update:isOpen'
+]);
+
+const {
+  ztAliases,
+  isOpen,
+  hideCell,
+  hideCode,
+  expandCode,
+  nonReactive,
+  showTable,
+  updateHideCell,
+  updateHideCode,
+  updateExpandCode,
+  updateReactivity,
+  updateShowTable
+} = useCellMenu(props as CellMenuProps, emit);
+</script>
+<style lang="scss" scoped>
+@import '@/styles/cell.scss';
+</style>
\ No newline at end of file
diff --git a/zt_frontend/src/components/cells/base/CellNameEditor.vue b/zt_frontend/src/components/cells/base/CellNameEditor.vue
new file mode 100644
index 00000000..3dc0cd2b
--- /dev/null
+++ b/zt_frontend/src/components/cells/base/CellNameEditor.vue
@@ -0,0 +1,89 @@
+<template>
+    <div class="click-edit" v-if="isDevMode && keepCodeInAppModel">
+      <div class="click-edit__show-text" v-if="!isEditing">
+        <div class="loading-wrapper">
+          <v-progress-circular
+            v-if="cellId == currentlyExecutingCell && isCodeRunning"
+            indeterminate
+            size="24"
+            class="ml-1 mr-2 green-loader"
+          />
+        </div>
+        <h4
+          class="text-bluegrey-darken-1 text-ellipsis click-edit__name"
+          @click="toggleEdit"
+        >
+          {{ modelValue }}
+        </h4>
+      </div>
+  
+      <div class="click-edit__edit-field-wrapper" v-if="isEditing">
+        <v-text-field
+          v-model="editValue"
+          :placeholder="cellType"
+          density="compact"
+          variant="plain"
+          hide-details
+          ref="cellNameField"
+          class="click-edit__edit-field"
+          @keydown.enter="save"
+          @update:focused="(focused:any) => { if (!focused) save(); }"
+        />
+      </div>
+    </div>
+    <h4
+      v-else-if="isDevMode"
+      class="text-bluegrey-darken-1 text-ellipsis click-edit__static-name"
+    >
+      {{ modelValue }}
+    </h4>
+  </template>
+  
+  <script setup lang="ts">
+  import { ref, nextTick } from 'vue';
+  import type { VTextField } from "vuetify/lib/components/index.mjs";
+  import axios from "axios";
+  import { NameCellRequest } from "@/types/name_cell_request";
+  
+  const props = defineProps({
+    modelValue: String,
+    isDevMode: Boolean,
+    keepCodeInAppModel: Boolean,
+    cellId: String,
+    cellType: String,
+    currentlyExecutingCell: String,
+    isCodeRunning: Boolean
+  });
+  
+  const emit = defineEmits(['update:modelValue']);
+  
+  const isEditing = ref(false);
+  const editValue = ref('');
+  const cellNameField = ref<VTextField | null>(null);
+  
+  const toggleEdit = () => {
+    isEditing.value = !isEditing.value;
+    if (isEditing.value) {
+      editValue.value = props.modelValue || '';
+      nextTick(() => {
+        if (cellNameField.value) {
+          cellNameField.value.focus();
+        }
+      });
+    }
+  };
+  
+  const save = async () => {
+    const nameCellRequest: NameCellRequest = {
+      cellId: props.cellId as string,
+      cellName: editValue.value as string,
+    };
+    await axios.post(import.meta.env.VITE_BACKEND_URL + "api/rename_cell", nameCellRequest);
+    emit('update:modelValue', editValue.value);
+    isEditing.value = false;
+  };
+  </script>
+
+<style lang="scss" scoped>
+@import '@/styles/cell.scss';
+</style>
\ No newline at end of file
diff --git a/zt_frontend/src/components/CodeCellManager.vue b/zt_frontend/src/components/cells/base/CodeCellManager.vue
similarity index 94%
rename from zt_frontend/src/components/CodeCellManager.vue
rename to zt_frontend/src/components/cells/base/CodeCellManager.vue
index 28e3ce65..b22e6c53 100644
--- a/zt_frontend/src/components/CodeCellManager.vue
+++ b/zt_frontend/src/components/cells/base/CodeCellManager.vue
@@ -50,12 +50,12 @@
 
 <script lang="ts">
 import { Notebook, CodeCell } from "@/types/notebook";
-import CodeComponent from "@/components/CodeComponent.vue";
-import MarkdownComponent from "@/components/MarkdownComponent.vue";
-import EditorComponent from "@/components/EditorComponent.vue";
-import SQLComponent from "@/components/SQLComponent.vue";
-import PackageComponent from "@/components/PackageComponent.vue";
-import AddCell from '@/components/AddCell.vue'
+import CodeComponent from "@/components/cells/code/CodeComponent.vue";
+import MarkdownComponent from "@/components/cells/markdown/MarkdownComponent.vue";
+import EditorComponent from "@/components/cells/text/EditorComponent.vue";
+import SQLComponent from "@/components/cells/sql/SQLComponent.vue";
+import PackageComponent from "@/components/plugins/PackageComponent.vue";
+import AddCell from '@/components/cells/base/AddCell.vue'
 import { PropType } from "vue";
 import { useRoute } from "vue-router";
 
diff --git a/zt_frontend/src/components/ComponentWrapper.vue b/zt_frontend/src/components/cells/base/ComponentWrapper.vue
similarity index 97%
rename from zt_frontend/src/components/ComponentWrapper.vue
rename to zt_frontend/src/components/cells/base/ComponentWrapper.vue
index 45036997..bffc8d46 100644
--- a/zt_frontend/src/components/ComponentWrapper.vue
+++ b/zt_frontend/src/components/cells/base/ComponentWrapper.vue
@@ -78,8 +78,8 @@ import {
   VCard,
 } from "vuetify/lib/components/index.mjs";
 import { VDataTable } from "vuetify/components/VDataTable";
-import TextComponent from "@/components/TextComponent.vue";
-import PlotlyPlot from "@/components/PlotlyComponent.vue";
+import TextComponent from "@/components/plugins/TextComponent.vue";
+import PlotlyPlot from "@/components/plugins/PlotlyComponent.vue";
 
 export default {
   components: {
diff --git a/zt_frontend/src/components/LayoutComponent.vue b/zt_frontend/src/components/cells/base/LayoutComponent.vue
similarity index 92%
rename from zt_frontend/src/components/LayoutComponent.vue
rename to zt_frontend/src/components/cells/base/LayoutComponent.vue
index adae6dd9..95c05494 100644
--- a/zt_frontend/src/components/LayoutComponent.vue
+++ b/zt_frontend/src/components/cells/base/LayoutComponent.vue
@@ -60,9 +60,9 @@ import {
 } from "vuetify/lib/components/index.mjs";
 import { VDataTable } from "vuetify/components/VDataTable";
 import { Column, ZTComponent, Row } from "@/types/notebook";
-import PlotlyPlot from "@/components/PlotlyComponent.vue";
-import TextComponent from "@/components/TextComponent.vue"
-import ComponentWrapper from "@/components/ComponentWrapper.vue";
+import PlotlyPlot from "@/components/plugins/PlotlyComponent.vue";
+import TextComponent from "@/components/plugins/TextComponent.vue"
+import ComponentWrapper from "@/components/cells/base/ComponentWrapper.vue";
 
 export default {
   emits: ["runCode"],
diff --git a/zt_frontend/src/components/CodeComponent.vue b/zt_frontend/src/components/cells/code/CodeComponent.vue
similarity index 82%
rename from zt_frontend/src/components/CodeComponent.vue
rename to zt_frontend/src/components/cells/code/CodeComponent.vue
index db657c67..dc1dbca5 100644
--- a/zt_frontend/src/components/CodeComponent.vue
+++ b/zt_frontend/src/components/cells/code/CodeComponent.vue
@@ -14,93 +14,45 @@
     :is-dev-mode="$devMode && !isAppRoute && !isMobile"
     @play="runCode(false, '', '')"
     @delete="deleteCell"
-    @expandCodeUpdate="(e) => expandCodeUpdate(e)"
-    @hideCode="(e) => hideCode(e)"
-    @renameCell="(e) => renameCell(e)"
-    @updateReactivity="(e) => updateReactivity(e)"
-    @addCell="(e) => createCell(e)"
+    @expandCodeUpdate="(e:any) => expandCodeUpdate(e)"
+    @hideCode="(e:any) => hideCode(e)"
+    @renameCell="(e:any) => renameCell(e)"
+    @updateReactivity="(e:any) => updateReactivity(e)"
+    @addCell="(e:any) => createCell(e)"
   >
-    <template v-slot:header-title>
-      <div
-        v-if="!$devMode || isAppRoute || isMobile"
-        style="display: flex; width: 100%"
-      >
-        <h4
-          v-if="cellData.hideCode"
-          class="text-bluegrey-darken-1 text-ellipsis app-static-name"
-        >
-          {{ cellData.cellName }}
-        </h4>
-        <v-expansion-panels v-else v-model="expanded">
-          <v-expansion-panel v-model="expanded" bg-color="bluegrey-darken-3">
-            <v-expansion-panel-title
-              class="text-bluegrey-darken-1"
-              :id="'codeMirrorAppTitle' + cellData.id"
-            >
-              <h4 class="text-ellipsis app-static-name">
-                {{ cellData.cellName }}
-              </h4>
-            </v-expansion-panel-title>
-            <v-expansion-panel-text>
-              <codemirror
-                v-model="cellData.code"
-                :style="{ height: '400px' }"
-                :autofocus="true"
-                :indent-with-tab="true"
-                :tab-size="2"
-                :viewportMargin="Infinity"
-                :extensions="extensions"
-                :code="cellData.code"
-                :id="'codeMirrorApp' + cellData.id"
-              />
-            </v-expansion-panel-text>
-          </v-expansion-panel>
-        </v-expansion-panels>
-      </div>
+      <template v-slot:header-title>
+      <HeaderTitle
+        :cellData="cellData"
+        v-model:expanded="expanded"
+        :extensions="extensions"
+        :devMode="$devMode"
+        :isAppRoute="isAppRoute"
+        :isMobile="isMobile"
+      />
     </template>
     <template v-slot:code>
-      <codemirror
-        v-if="$devMode && !isAppRoute && !isMobile"
-        v-model="cellData.code"
-        :style="{ height: '400px' }"
-        :autofocus="true"
-        :indent-with-tab="true"
-        :tab-size="2"
-        :viewportMargin="Infinity"
+      <EditorComponent
+        :code="cellData.code"
         :extensions="extensions"
+        :cell-id="cellData.id"
+        :is-dev-mode="$devMode"
+        @update:code="updateCode"
+        @saveCell="saveCell"
         @ready="handleReady"
-        @keyup="saveCell"
         @focus="handleFocus"
         @blur="handleBlur"
-        :code="cellData.code"
-        :id="'codeMirrorDev' + cellData.id"
       />
     </template>
     <template v-slot:outcome>
-      <div :id="'outputContainer_' + cellData.id">
-        <layout-component
-          v-if="cellData.layout?.rows?.length"
-          v-for="(row, rowIndex) in cellData.layout?.rows"
-          :key="rowIndex"
-          :row-data="row"
-          :components="compDict"
-          @runCode="runCode"
-        />
-        <!-- Render unplaced components at the bottom -->
-        <div
-          v-if="unplacedComponents.length"
-          :id="'unplacedComponents' + cellData.id"
-        >
-          <component-wrapper
-            :renderComponents="unplacedComponents"
-            :allComponents="compDict"
-            @runCode="runCode"
-          />
-        </div>
-        <pre class="code-output" :id="'cellOutput' + cellData.id">{{
-          cellData.output
-        }}</pre>
-      </div>
+      <OutcomeComponent
+      :cell-id="cellData.id"
+      :layout="cellData.layout"
+      :unplacedComponents="unplacedComponents"
+      :output="cellData.output"
+      :compDict="compDict"
+      @runCode="runCode"
+    />
+
     </template>
   </cell>
 </template>
@@ -109,7 +61,7 @@
 import type { PropType, ShallowRef } from "vue";
 import { shallowRef } from "vue";
 import axios from "axios";
-import PlotlyPlot from "@/components/PlotlyComponent.vue";
+import PlotlyPlot from "@/components/plugins/PlotlyComponent.vue";
 import { Codemirror } from "vue-codemirror";
 import { python } from "@codemirror/lang-python";
 import { indentUnit } from "@codemirror/language";
@@ -138,19 +90,25 @@ import {
 } from "vuetify/lib/components/index.mjs";
 import { VDataTable } from "vuetify/components/VDataTable";
 import { CodeCell, Layout, ZTComponent } from "@/types/notebook";
-import LayoutComponent from "@/components/LayoutComponent.vue";
-import TextComponent from "@/components/TextComponent.vue";
+import LayoutComponent from "@/components/cells/base/LayoutComponent.vue";
+import TextComponent from "@/components/plugins/TextComponent.vue";
 import { globalState } from "@/global_vars";
 import { useRoute } from "vue-router";
-import Cell from "@/components/Cell.vue";
+import Cell from "@/components/cells/base/Cell.vue";
 import { inlineSuggestion } from "codemirror-extension-inline-suggestion";
-import ComponentWrapper from "@/components/ComponentWrapper.vue";
+import ComponentWrapper from "@/components/cells/base/ComponentWrapper.vue";
 import { linter, Diagnostic } from "@codemirror/lint";
+import HeaderTitle from "./HeaderTitleComponent.vue";
+import EditorComponent from "./EditorComponent.vue";
+import OutcomeComponent from "./OutcomeComponent.vue";
 
 export default {
   components: {
     cell: Cell,
     codemirror: Codemirror,
+    HeaderTitle,
+    EditorComponent,
+    OutcomeComponent,
     "v-slider": VSlider,
     "v-rating": VRating,
     "v-text-field": VTextField,
@@ -511,6 +469,9 @@ export default {
     createCell(cellType: string) {
       this.$emit("createCell", this.cellData.id, cellType);
     },
+    updateCode(newCode:any) {
+      this.cellData.code = newCode;
+    },
     saveCell() {
       if (!this.$devMode || !this.view?.hasFocus) return;
       const position = this.view?.state.selection.main.head;
diff --git a/zt_frontend/src/components/cells/code/EditorComponent.vue b/zt_frontend/src/components/cells/code/EditorComponent.vue
new file mode 100644
index 00000000..3cb8e2aa
--- /dev/null
+++ b/zt_frontend/src/components/cells/code/EditorComponent.vue
@@ -0,0 +1,94 @@
+<template>
+  <div>
+    <codemirror
+      v-model="localCode"
+      :style="{ height: '400px' }"
+      :autofocus="true"
+      :indent-with-tab="true"
+      :tab-size="2"
+      :viewportMargin="Infinity"
+      :extensions="extensions"
+      :id="'codeMirror_' + cellId"
+      @ready="handleReady"
+      @keyup="handleKeyup"
+      @focus="handleFocus"
+      @blur="handleBlur"
+    />
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, shallowRef, PropType, watch } from "vue";
+import { Codemirror } from "vue-codemirror";
+import { EditorView } from "@codemirror/view";
+
+export default defineComponent({
+  name: "EditorComponent",
+  components: { codemirror: Codemirror },
+  props: {
+    code: {
+      type: String,
+      required: true,
+    },
+    extensions: {
+      type: Array as PropType<any[]>,
+      required: true,
+    },
+    cellId: {
+      type: String,
+      required: true,
+    },
+    isDevMode: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  emits: ["update:code", "saveCell", "ready", "focus", "blur"],
+  setup(props, { emit }) {
+    const editorView = shallowRef<EditorView | null>(null);
+
+    // Local state to manage the editor content
+    const localCode = shallowRef(props.code);
+
+    // Watch for external changes to `props.code` and update `localCode`
+    watch(
+      () => props.code,
+      (newCode) => {
+        if (newCode !== localCode.value) {
+          localCode.value = newCode;
+        }
+      }
+    );
+
+    // Emit `update:code` whenever localCode changes
+    const handleKeyup = () => {
+      emit("update:code", localCode.value); // Sync localCode with the parent
+      saveCell();
+    };
+
+    const saveCell = () => {
+      if (editorView.value) {
+        const position = editorView.value.state.selection.main.head;
+        const line = editorView.value.state.doc.lineAt(position).number;
+        const column = position - editorView.value.state.doc.line(line).from;
+        emit("saveCell", { line, column, code: localCode.value });
+      }
+    };
+
+    const handleReady = (payload: any) => {
+      editorView.value = payload.view;
+      emit("ready", payload);
+    };
+
+    const handleFocus = () => {
+      emit("focus");
+    };
+
+    const handleBlur = () => {
+      emit("blur");
+    };
+
+    return { localCode, handleKeyup, handleReady, handleFocus, handleBlur };
+  },
+});
+</script>
\ No newline at end of file
diff --git a/zt_frontend/src/components/cells/code/HeaderTitleComponent.vue b/zt_frontend/src/components/cells/code/HeaderTitleComponent.vue
new file mode 100644
index 00000000..62c58de2
--- /dev/null
+++ b/zt_frontend/src/components/cells/code/HeaderTitleComponent.vue
@@ -0,0 +1,51 @@
+<template>
+    <div v-if="!devMode || isAppRoute || isMobile" style="display: flex; width: 100%">
+      <h4 v-if="cellData.hideCode" class="text-bluegrey-darken-1 text-ellipsis app-static-name">
+        {{ cellData.cellName }}
+      </h4>
+      <v-expansion-panels :model-value="expanded" @update:model-value="updateExpanded">
+        <v-expansion-panel :model-value="expanded" bg-color="bluegrey-darken-3">
+          <v-expansion-panel-title
+            class="text-bluegrey-darken-1"
+            :id="'codeMirrorAppTitle' + cellData.id"
+          >
+            <h4 class="text-ellipsis app-static-name">
+              {{ cellData.cellName }}
+            </h4>
+          </v-expansion-panel-title>
+          <v-expansion-panel-text>
+            <codemirror
+              v-model="cellData.code"
+              :style="{ height: '400px' }"
+              :autofocus="true"
+              :indent-with-tab="true"
+              :tab-size="2"
+              :viewportMargin="Infinity"
+              :extensions="extensions"
+              :code="cellData.code"
+              :id="'codeMirrorApp' + cellData.id"
+            />
+          </v-expansion-panel-text>
+        </v-expansion-panel>
+      </v-expansion-panels>
+    </div>
+  </template>
+  
+  <script lang="ts">
+  export default {
+    props: {
+      cellData: { type: Object, required: true },
+      expanded: { type: Array, required: true }, // Accept expanded as a prop
+      extensions: { type: Array, required: true },
+      devMode: { type: Boolean, required: true },
+      isAppRoute: { type: Boolean, required: true },
+      isMobile: { type: Boolean, required: true },
+    },
+    emits: ["update:expanded"], // Emit update:expanded event
+    methods: {
+      updateExpanded(value:any) {
+        this.$emit("update:expanded", value); // Emit event when expanded changes
+      },
+    },
+  };
+  </script>
\ No newline at end of file
diff --git a/zt_frontend/src/components/cells/code/OutcomeComponent.vue b/zt_frontend/src/components/cells/code/OutcomeComponent.vue
new file mode 100644
index 00000000..e8cc9ea0
--- /dev/null
+++ b/zt_frontend/src/components/cells/code/OutcomeComponent.vue
@@ -0,0 +1,72 @@
+<template>
+  <div>
+    <!-- Main output container -->
+    <div :id="'outputContainer_' + cellId">
+      <!-- Render layout rows -->
+      <layout-component
+        v-if="layout?.rows?.length"
+        v-for="(row, rowIndex) in layout.rows"
+        :key="rowIndex"
+        :row-data="row"
+        :components="compDict"
+        @runCode="runCode"
+      />
+      
+      <!-- Render unplaced components -->
+      <div v-if="unplacedComponents.length" :id="'unplacedComponents_' + cellId">
+        <component-wrapper
+          :renderComponents="unplacedComponents"
+          :allComponents="compDict"
+          @runCode="runCode"
+        />
+      </div>
+
+      <!-- Render output -->
+      <pre class="code-output" :id="'cellOutput_' + cellId">{{ output }}</pre>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType } from "vue";
+import LayoutComponent from "@/components/cells/base/LayoutComponent.vue";
+import ComponentWrapper from "@/components/cells/base/ComponentWrapper.vue";
+import { Layout, ZTComponent } from "@/types/notebook";
+
+export default defineComponent({
+  name: "OutcomeComponent",
+  components: {
+    "layout-component": LayoutComponent,
+    "component-wrapper": ComponentWrapper,
+  },
+  props: {
+    cellId: {
+      type: String,
+      required: true,
+    },
+    layout: {
+      type: Object as PropType<Layout>,
+      required: false,
+    },
+    unplacedComponents: {
+      type: Array as PropType<ZTComponent[]>,
+      required: true,
+    },
+    output: {
+      type: String,
+      required: false,
+      default: "",
+    },
+    compDict: {
+      type: Object as PropType<Record<string, ZTComponent>>,
+      required: true,
+    },
+  },
+  emits: ["runCode"],
+  methods: {
+    runCode(componentId: string, componentValue: any) {
+      this.$emit("runCode", componentId, componentValue);
+    },
+  },
+});
+</script>
diff --git a/zt_frontend/src/components/MarkdownComponent.vue b/zt_frontend/src/components/cells/markdown/MarkdownComponent.vue
similarity index 98%
rename from zt_frontend/src/components/MarkdownComponent.vue
rename to zt_frontend/src/components/cells/markdown/MarkdownComponent.vue
index 8348d00e..36b8fad7 100644
--- a/zt_frontend/src/components/MarkdownComponent.vue
+++ b/zt_frontend/src/components/cells/markdown/MarkdownComponent.vue
@@ -41,9 +41,9 @@ import { markdown } from '@codemirror/lang-markdown'
 import { oneDark } from '@codemirror/theme-one-dark'
 import { autocompletion } from '@codemirror/autocomplete'
 import { CodeCell } from "@/types/notebook";
-import AddCell from '@/components/AddCell.vue'
+import AddCell from '@/components/cells/base/AddCell.vue'
 import { useRoute } from 'vue-router'
-import Cell from '@/components/Cell.vue'
+import Cell from '@/components/cells/base/Cell.vue'
 import {EditorView, keymap} from "@codemirror/view";
 import {Prec} from "@codemirror/state";
 
diff --git a/zt_frontend/src/components/SQLComponent.vue b/zt_frontend/src/components/cells/sql/SQLComponent.vue
similarity index 99%
rename from zt_frontend/src/components/SQLComponent.vue
rename to zt_frontend/src/components/cells/sql/SQLComponent.vue
index 701f8c0c..c76066de 100644
--- a/zt_frontend/src/components/SQLComponent.vue
+++ b/zt_frontend/src/components/cells/sql/SQLComponent.vue
@@ -102,7 +102,7 @@ import {
 } from "@codemirror/autocomplete";
 import { CodeCell } from "@/types/notebook";
 import { useRoute } from "vue-router";
-import Cell from '@/components/Cell.vue'
+import Cell from '@/components/cells/base/Cell.vue'
 
 export default {
   components: {
diff --git a/zt_frontend/src/components/EditorComponent.vue b/zt_frontend/src/components/cells/text/EditorComponent.vue
similarity index 99%
rename from zt_frontend/src/components/EditorComponent.vue
rename to zt_frontend/src/components/cells/text/EditorComponent.vue
index d3184fb9..4f7d72b1 100644
--- a/zt_frontend/src/components/EditorComponent.vue
+++ b/zt_frontend/src/components/cells/text/EditorComponent.vue
@@ -43,7 +43,7 @@ import "tinymce/plugins/image";
 import Editor from "@tinymce/tinymce-vue";
 import { CodeCell } from "@/types/notebook";
 import { useRoute } from "vue-router";
-import Cell from "@/components/Cell.vue";
+import Cell from "@/components/cells/base/Cell.vue";
 
 export default {
   components: {
diff --git a/zt_frontend/src/components/FileExplorer.vue b/zt_frontend/src/components/file-system/FileExplorer.vue
similarity index 92%
rename from zt_frontend/src/components/FileExplorer.vue
rename to zt_frontend/src/components/file-system/FileExplorer.vue
index 66383019..2a890828 100644
--- a/zt_frontend/src/components/FileExplorer.vue
+++ b/zt_frontend/src/components/file-system/FileExplorer.vue
@@ -77,13 +77,13 @@
 <script lang="ts">
 import { defineComponent, ref, onMounted, watch, computed } from "vue";
 import axios from "axios";
-import FileUploader from "@/components/FileUploader.vue";
-import FileFolderCreator from "@/components/FileFolderCreator.vue";
-import RenameDialog from "@/components/FileFolderRenameDialog.vue";
-import DeleteDialog from "@/components/FileFolderDeleteDialog.vue";
-import FileEditorDialog from '@/components/FileEditorDialog.vue';
-import FileFolderDownloadDialog from "@/components/FileFolderDownloadDialog.vue";
-import FileTreeNode from "@/components/FileTreeNode.vue";
+import FileUploader from "@/components/file-system/FileUploader.vue";
+import FileFolderCreator from "@/components/file-system/dialogs/FileFolderCreator.vue";
+import RenameDialog from "@/components/file-system/dialogs/FileFolderRenameDialog.vue";
+import DeleteDialog from "@/components/file-system/dialogs/FileFolderDeleteDialog.vue";
+import FileEditorDialog from '@/components/file-system/dialogs/FileEditorDialog.vue';
+import FileFolderDownloadDialog from "@/components/file-system/dialogs/FileFolderDownloadDialog.vue";
+import FileTreeNode from "@/components/file-system/FileTreeNode.vue";
 import { debounce } from "lodash";
 
 export default defineComponent({
diff --git a/zt_frontend/src/components/FileTreeNode.vue b/zt_frontend/src/components/file-system/FileTreeNode.vue
similarity index 96%
rename from zt_frontend/src/components/FileTreeNode.vue
rename to zt_frontend/src/components/file-system/FileTreeNode.vue
index ebd6f111..11caf923 100644
--- a/zt_frontend/src/components/FileTreeNode.vue
+++ b/zt_frontend/src/components/file-system/FileTreeNode.vue
@@ -82,11 +82,11 @@
 <script lang="ts">
 import { defineComponent, ref} from 'vue';
 import axios from 'axios';
-import FileEditorDialog from '@/components/FileEditorDialog.vue';
-import FileFolderDownloadDialog from '@/components/FileFolderDownloadDialog.vue';
-import RenameDialog from '@/components/FileFolderRenameDialog.vue';
-import DeleteDialog from '@/components/FileFolderDeleteDialog.vue';
-import FileFolderCreator from '@/components/FileFolderCreator.vue'; // Import the component
+import FileEditorDialog from '@/components/file-system/dialogs/FileEditorDialog.vue';
+import FileFolderDownloadDialog from '@/components/file-system/dialogs/FileFolderDownloadDialog.vue';
+import RenameDialog from '@/components/file-system/dialogs/FileFolderRenameDialog.vue';
+import DeleteDialog from '@/components/file-system/dialogs/FileFolderDeleteDialog.vue';
+import FileFolderCreator from '@/components/file-system/dialogs/FileFolderCreator.vue';
 
 let currentlyOpenMenu: any = null;
 
diff --git a/zt_frontend/src/components/FileUploader.vue b/zt_frontend/src/components/file-system/FileUploader.vue
similarity index 100%
rename from zt_frontend/src/components/FileUploader.vue
rename to zt_frontend/src/components/file-system/FileUploader.vue
diff --git a/zt_frontend/src/components/FileEditorDialog.vue b/zt_frontend/src/components/file-system/dialogs/FileEditorDialog.vue
similarity index 100%
rename from zt_frontend/src/components/FileEditorDialog.vue
rename to zt_frontend/src/components/file-system/dialogs/FileEditorDialog.vue
diff --git a/zt_frontend/src/components/FileFolderCreator.vue b/zt_frontend/src/components/file-system/dialogs/FileFolderCreator.vue
similarity index 100%
rename from zt_frontend/src/components/FileFolderCreator.vue
rename to zt_frontend/src/components/file-system/dialogs/FileFolderCreator.vue
diff --git a/zt_frontend/src/components/FileFolderDeleteDialog.vue b/zt_frontend/src/components/file-system/dialogs/FileFolderDeleteDialog.vue
similarity index 100%
rename from zt_frontend/src/components/FileFolderDeleteDialog.vue
rename to zt_frontend/src/components/file-system/dialogs/FileFolderDeleteDialog.vue
diff --git a/zt_frontend/src/components/FileFolderDownloadDialog.vue b/zt_frontend/src/components/file-system/dialogs/FileFolderDownloadDialog.vue
similarity index 100%
rename from zt_frontend/src/components/FileFolderDownloadDialog.vue
rename to zt_frontend/src/components/file-system/dialogs/FileFolderDownloadDialog.vue
diff --git a/zt_frontend/src/components/FileFolderRenameDialog.vue b/zt_frontend/src/components/file-system/dialogs/FileFolderRenameDialog.vue
similarity index 100%
rename from zt_frontend/src/components/FileFolderRenameDialog.vue
rename to zt_frontend/src/components/file-system/dialogs/FileFolderRenameDialog.vue
diff --git a/zt_frontend/src/components/CopilotComponent.vue b/zt_frontend/src/components/plugins/CopilotComponent.vue
similarity index 100%
rename from zt_frontend/src/components/CopilotComponent.vue
rename to zt_frontend/src/components/plugins/CopilotComponent.vue
diff --git a/zt_frontend/src/components/PackageComponent.vue b/zt_frontend/src/components/plugins/PackageComponent.vue
similarity index 100%
rename from zt_frontend/src/components/PackageComponent.vue
rename to zt_frontend/src/components/plugins/PackageComponent.vue
diff --git a/zt_frontend/src/components/PlotlyComponent.vue b/zt_frontend/src/components/plugins/PlotlyComponent.vue
similarity index 100%
rename from zt_frontend/src/components/PlotlyComponent.vue
rename to zt_frontend/src/components/plugins/PlotlyComponent.vue
diff --git a/zt_frontend/src/components/ShareComponent.vue b/zt_frontend/src/components/plugins/ShareComponent.vue
similarity index 100%
rename from zt_frontend/src/components/ShareComponent.vue
rename to zt_frontend/src/components/plugins/ShareComponent.vue
diff --git a/zt_frontend/src/components/TextComponent.vue b/zt_frontend/src/components/plugins/TextComponent.vue
similarity index 100%
rename from zt_frontend/src/components/TextComponent.vue
rename to zt_frontend/src/components/plugins/TextComponent.vue
diff --git a/zt_frontend/src/composables/CellComponent/cell-header.ts b/zt_frontend/src/composables/CellComponent/cell-header.ts
new file mode 100644
index 00000000..076db956
--- /dev/null
+++ b/zt_frontend/src/composables/CellComponent/cell-header.ts
@@ -0,0 +1,78 @@
+import { ref, computed } from 'vue';
+import axios from 'axios';
+import { useCellType } from './cell-type';
+
+export function useCellHeader(props: any, emit: any) {
+  // Create refs for useCellType
+  const cellTypeRef = ref(props.cellType);
+  const errorRef = ref(props.error);
+
+  // Use your existing composable
+  const { cellTypeColor, cellTypeIcon } = useCellType(cellTypeRef, errorRef);
+
+  // State
+  const isMenuOpen = ref(false);
+  const cellNameValue = ref(props.cellName || props.cellType);
+
+  // Computed
+  const keepCodeInAppModel = computed(() => 
+    props.cellType === "code" || props.cellType === "sql"
+  );
+
+  // API handlers
+  const updateHideCell = async (value: boolean) => {
+    await axios.post(import.meta.env.VITE_BACKEND_URL + "api/hide_cell", {
+      cellId: props.cellId,
+      hideCell: value,
+    });
+  };
+
+  const handleHideCode = async (value: boolean) => {
+    await axios.post(import.meta.env.VITE_BACKEND_URL + "api/hide_code", {
+      cellId: props.cellId,
+      hideCode: value,
+    });
+    emit("hideCode", value);
+  };
+
+  const handleExpandCode = async (value: boolean) => {
+    await axios.post(import.meta.env.VITE_BACKEND_URL + "api/expand_code", {
+      cellId: props.cellId,
+      expandCode: value,
+    });
+    emit("expandCodeUpdate", value);
+  };
+
+  const handleReactivity = async (value: boolean) => {
+    await axios.post(import.meta.env.VITE_BACKEND_URL + "api/cell_reactivity", {
+      cellId: props.cellId,
+      nonReactive: value,
+    });
+    emit("updateReactivity", value);
+  };
+
+  const handleShowTable = async (value: boolean) => {
+    await axios.post(import.meta.env.VITE_BACKEND_URL + "api/show_table", {
+      cellId: props.cellId,
+      showTable: value,
+    });
+    emit("updateShowTable", value);
+  };
+
+  return {
+    // State
+    isMenuOpen,
+    cellNameValue,
+    // From useCellType
+    cellTypeColor,
+    cellTypeIcon,
+    // Computed
+    keepCodeInAppModel,
+    // Actions
+    updateHideCell,
+    handleHideCode,
+    handleExpandCode,
+    handleReactivity,
+    handleShowTable,
+  };
+}
diff --git a/zt_frontend/src/composables/CellComponent/cell-menu.ts b/zt_frontend/src/composables/CellComponent/cell-menu.ts
new file mode 100644
index 00000000..759fa676
--- /dev/null
+++ b/zt_frontend/src/composables/CellComponent/cell-menu.ts
@@ -0,0 +1,110 @@
+import { ref, watch } from 'vue';
+import axios from 'axios';
+import { ztAliases } from "@/iconsets/ztIcon";
+import type { HideCellRequest } from '@/types/hide_cell_request';
+import type { HideCodeRequest } from '@/types/hide_code_request';
+import type { ExpandCodeRequest } from '@/types/expand_code_request';
+import type { CellReactivityRequest } from '@/types/cell_reactivity_request';
+import type { ShowTableRequest } from '@/types/show_table_request';
+
+export interface CellMenuProps {
+  cellId: string;
+  cellType: string;
+  hideCell: boolean;
+  hideCode: boolean;
+  expandCode: boolean;
+  nonReactive: boolean;
+  showTable: boolean;
+  keepCodeInAppModel: boolean;
+}
+
+export function useCellMenu(props: CellMenuProps, emit: any) {
+  // Menu state
+  const isOpen = ref(false);
+
+  // Two-way binding for all switches
+  const hideCell = ref(props.hideCell);
+  const hideCode = ref(props.hideCode);
+  const expandCode = ref(props.expandCode);
+  const nonReactive = ref(props.nonReactive);
+  const showTable = ref(props.showTable);
+
+  // API update functions
+  const updateHideCell = async (value: boolean | null) => {
+    const boolValue = value ?? false;
+    const request: HideCellRequest = {
+      cellId: props.cellId,
+      hideCell: boolValue,
+    };
+    await axios.post(import.meta.env.VITE_BACKEND_URL + "api/hide_cell", request);
+    emit('update:hideCell', boolValue);
+  };
+
+  const updateHideCode = async (value: boolean | null) => {
+    const boolValue = value ?? false;
+    const request: HideCodeRequest = {
+      cellId: props.cellId,
+      hideCode: boolValue,
+    };
+    await axios.post(import.meta.env.VITE_BACKEND_URL + "api/hide_code", request);
+    emit('update:hideCode', boolValue);
+  };
+
+  const updateExpandCode = async (value: boolean | null) => {
+    const boolValue = value ?? false;
+    const request: ExpandCodeRequest = {
+      cellId: props.cellId,
+      expandCode: boolValue,
+    };
+    await axios.post(import.meta.env.VITE_BACKEND_URL + "api/expand_code", request);
+    emit('update:expandCode', boolValue);
+  };
+
+  const updateReactivity = async (value: boolean | null) => {
+    const boolValue = value ?? false;
+    const request: CellReactivityRequest = {
+      cellId: props.cellId,
+      nonReactive: boolValue,
+    };
+    await axios.post(import.meta.env.VITE_BACKEND_URL + "api/cell_reactivity", request);
+    emit('update:nonReactive', value);
+  };
+
+  const updateShowTable = async (value: boolean | null) => {
+    const boolValue = value ?? false;
+    const request: ShowTableRequest = {
+      cellId: props.cellId,
+      showTable: boolValue,
+    };
+    await axios.post(import.meta.env.VITE_BACKEND_URL + "api/show_table", request);
+    emit('update:showTable', boolValue);
+  };
+
+  // Watch for prop changes
+  watch(() => props.hideCell, (val) => hideCell.value = val);
+  watch(() => props.hideCode, (val) => hideCode.value = val);
+  watch(() => props.expandCode, (val) => expandCode.value = val);
+  watch(() => props.nonReactive, (val) => nonReactive.value = val);
+  watch(() => props.showTable, (val) => showTable.value = val);
+
+  // Emit isOpen changes
+  watch(isOpen, (val) => emit('update:isOpen', val));
+
+  return {
+    // Icons
+    ztAliases,
+    // State
+    isOpen,
+    hideCell,
+    hideCode,
+    expandCode,
+    nonReactive,
+    showTable,
+    // Actions
+    updateHideCell,
+    updateHideCode,
+    updateExpandCode,
+    updateReactivity,
+    updateShowTable
+  };
+}
\ No newline at end of file
diff --git a/zt_frontend/src/composables/CellComponent/cell-state.ts b/zt_frontend/src/composables/CellComponent/cell-state.ts
new file mode 100644
index 00000000..80b3c88f
--- /dev/null
+++ b/zt_frontend/src/composables/CellComponent/cell-state.ts
@@ -0,0 +1,21 @@
+import { ref, watch, Ref } from "vue";
+
+export function useCellState(hideCell: Ref<boolean>, nonReactive: Ref<boolean>) {
+  const showHeader = ref(false);
+  const hideCellValue = ref(hideCell.value);
+  const nonReactiveValue = ref(nonReactive.value);
+
+  watch(hideCell, (newValue) => {
+    hideCellValue.value = newValue;
+  });
+
+  watch(nonReactive, (newValue) => {
+    nonReactiveValue.value = newValue;
+  });
+
+  return {
+    showHeader,
+    hideCellValue,
+    nonReactiveValue,
+  };
+}
diff --git a/zt_frontend/src/composables/cell-type.ts b/zt_frontend/src/composables/CellComponent/cell-type.ts
similarity index 100%
rename from zt_frontend/src/composables/cell-type.ts
rename to zt_frontend/src/composables/CellComponent/cell-type.ts
diff --git a/zt_frontend/src/composables/CellComponent/route-helpers.ts b/zt_frontend/src/composables/CellComponent/route-helpers.ts
new file mode 100644
index 00000000..dd9cf6e6
--- /dev/null
+++ b/zt_frontend/src/composables/CellComponent/route-helpers.ts
@@ -0,0 +1,7 @@
+import { computed } from "vue";
+import { useRoute } from "vue-router";
+
+export function useRouteHelpers() {
+  const isAppRoute = computed(() => useRoute().name === "/app");
+  return { isAppRoute };
+}
diff --git a/zt_frontend/src/pages/app.vue b/zt_frontend/src/pages/app.vue
index eafb8cb8..e399890d 100644
--- a/zt_frontend/src/pages/app.vue
+++ b/zt_frontend/src/pages/app.vue
@@ -13,7 +13,7 @@
 </template>
 
 <script lang="ts">
-import CodeCellManager from "@/components/CodeCellManager.vue";
+import CodeCellManager from "@/components/cells/base/CodeCellManager.vue";
 import { Notebook, CodeCell } from "@/types/notebook";
 import { PropType } from "vue";
 
diff --git a/zt_frontend/src/pages/index.vue b/zt_frontend/src/pages/index.vue
index 9b80effb..9989a768 100644
--- a/zt_frontend/src/pages/index.vue
+++ b/zt_frontend/src/pages/index.vue
@@ -12,7 +12,7 @@
 </template>
 
 <script lang="ts">
-import CodeCellManager from "@/components/CodeCellManager.vue";
+import CodeCellManager from "@/components/cells/base/CodeCellManager.vue";
 import { Notebook } from "@/types/notebook";
 import { PropType } from "vue";
 
diff --git a/zt_frontend/src/styles/cell.scss b/zt_frontend/src/styles/cell.scss
new file mode 100644
index 00000000..a631fef4
--- /dev/null
+++ b/zt_frontend/src/styles/cell.scss
@@ -0,0 +1,106 @@
+.cell {
+    padding: 5px;
+    display: flex;
+    margin-bottom: 2px;
+    width: 100%;
+    &--dev {
+      margin-bottom: 6px;
+    }
+  }
+  .message-btn {
+    &--alert {
+      background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSIjQUU5RkU4Ij48cGF0aCBkPSJNMTMuMzA1IDIyLjVMMTIgMjEuNzVMMTUgMTYuNUgxOS41QzE5Ljg5NzggMTYuNSAyMC4yNzk0IDE2LjM0MiAyMC41NjA3IDE2LjA2MDdDMjAuODQyIDE1Ljc3OTQgMjEgMTUuMzk3OCAyMSAxNVY2QzIxIDUuNjAyMTggMjAuODQyIDUuMjIwNjQgMjAuNTYwNyA0LjkzOTM0QzIwLjI3OTQgNC42NTgwNCAxOS44OTc4IDQuNSAxOS41IDQuNUg0LjVDNC4xMDIxOCA0LjUgMy43MjA2NCA0LjY1ODA0IDMuNDM5MzQgNC45MzkzNEMzLjE1ODA0IDUuMjIwNjQgMyA1LjYwMjE4IDMgNlYxNUMzIDE1LjM5NzggMy4xNTgwNCAxNS43Nzk0IDMuNDM5MzQgMTYuMDYwN0MzLjcyMDY0IDE2LjM0MiA0LjEwMjE4IDE2LjUgNC41IDE2LjVIMTEuMjVWMThINC41QzMuNzA0MzUgMTggMi45NDEyOSAxNy42ODM5IDIuMzc4NjggMTcuMTIxM0MxLjgxNjA3IDE2LjU1ODcgMS41IDE1Ljc5NTYgMS41IDE1VjZDMS41IDUuMjA0MzUgMS44MTYwNyA0LjQ0MTI5IDIuMzc4NjggMy44Nzg2OEMyLjk0MTI5IDMuMzE2MDcgMy43MDQzNSAzIDQuNSAzSDE5LjVDMjAuMjk1NiAzIDIxLjA1ODcgMy4zMTYwNyAyMS42MjEzIDMuODc4NjhDMjIuMTgzOSA0LjQ0MTI5IDIyLjUgNS4yMDQzNSAyMi41IDZWMTVDMjIuNSAxNS43OTU2IDIyLjE4MzkgMTYuNTU4NyAyMS42MjEzIDE3LjEyMTNDMjEuMDU4NyAxNy42ODM5IDIwLjI5NTYgMTggMTkuNSAxOEgxNS44N0wxMy4zMDUgMjIuNVoiIGZpbGw9IiNBRTlGRTgiLz48L3N2Zz4=");
+      background-position: center;
+      background-repeat: no-repeat;
+      transition: none;
+    }
+    &__counter {
+      margin-bottom: 4px;
+    }
+  }
+  .delete-cell:hover {
+    background-color: #6e3d41;
+  }
+  
+  .content {
+    flex: 1;
+    margin-left: 16px;
+    margin-right: 0px;
+    width: calc(100% - 36px);
+  }
+  
+  .indicator {
+    border-radius: 4px;
+  }
+  
+  .header {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 2px;
+  }
+  
+  .code,
+  .outcome {
+    padding: 0px;
+    &--dev {
+      border: 1px solid rgba(var(--v-theme-bluegrey));
+      border-radius: 3px;
+      padding: 6px;
+    }
+  }
+  
+  .code {
+    margin-bottom: 10px;
+  }
+  
+  .click-edit {
+    width: calc(100% - 135px);
+    &__name {
+      cursor: text;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+    &__show-text,
+    &__edit-field-wrapper {
+      height: 100%;
+      display: flex;
+      align-items: center;
+    }
+    &__name:hover {
+      cursor: text;
+      padding-left: 3px;
+      padding-right: 3px;
+      border: 1px solid #294455;
+    }
+  
+    &__static-name {
+      cursor: text;
+      font-weight: normal;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+  
+    &__edit-field {
+      margin-top: -11px;
+      & :deep(.v-field__input) {
+        font-size: 1rem;
+        letter-spacing: normal;
+      }
+    }
+    .actions {
+      display: flex;
+      align-items: center;
+    }
+  
+    .loading-wrapper {
+      display: flex;
+      align-items: center;
+      margin-right: 8px;
+    }
+  
+    .green-loader {
+      color: rgba(var(--v-theme-success));
+    }
+  }
\ No newline at end of file