diff --git a/src/components/Extra.vue b/src/components/Extra.vue
index 746c726e..13eb4a6e 100644
--- a/src/components/Extra.vue
+++ b/src/components/Extra.vue
@@ -11,7 +11,7 @@
 
     <!-- --------------------------------------------------------------------------------------------- -->
     <!-- Circuit Elements Panel -->
-    <ElementsPanel />
+    <ElementsPanel  v-if="!simulatorMobileStore.showMobileView"/>
     <!-- --------------------------------------------------------------------------------------------- -->
 
     <!-- --------------------------------------------------------------------------------------------- -->
@@ -39,9 +39,9 @@
 
     <!-- --------------------------------------------------------------------------------------------- -->
     <!-- Testbench -->
-    <TestBenchPanel />
+    <TestBenchPanel v-if="!simulatorMobileStore.showMobileView" />
     <!-- --------------------------------------------------------------------------------------------- -->
-    <TestBenchCreator />
+    <TestBenchCreator v-if="!simulatorMobileStore.showMobileView" />
     <!-- --------------------------------------------------------------------------------------------- -->
 
     <!-- --------------------------------------------------------------------------------------------- -->
@@ -153,6 +153,57 @@
     <!---issue reporting-system----->
     <ReportIssue />
     <!-- --------------------------------------------------------------------------------------------- -->
+
+    <v-btn
+      class="cir-ele-btn"
+      @mousedown="simulatorMobileStore.showElementsPanel = !simulatorMobileStore.showElementsPanel"
+      :style="{bottom: simulatorMobileStore.showElementsPanel ? '10rem' : '2rem'}"
+      v-if="simulatorMobileStore.showMobileView"
+    >
+        <i class="fas fa-bezier-curve"></i>
+    </v-btn>
+
+    <v-btn
+      class="select-mul-btn"
+      @mousedown="(e: React.MouseEvent) => {
+        if(simulationArea.shiftDown == false) {
+            simulationArea.shiftDown = true;
+        }
+        else {
+            simulationArea.shiftDown = false;
+            e.preventDefault();
+        }
+      }"
+      :style="{bottom: simulatorMobileStore.showElementsPanel ? '10rem' : '2rem'}"
+      v-if="simulatorMobileStore.showMobileView"
+    >
+    <i class="fa-solid fa-vector-square"></i>
+    </v-btn>
+
+    <v-btn
+      class="select-mul-btn"
+      @mousedown="() => {
+        simulationArea.shiftDown = false;
+        simulatorMobileStore.isCopy = true;
+      }"
+      :style="{bottom: simulatorMobileStore.showElementsPanel ? '16rem' : '8rem'}"
+      v-if="simulatorMobileStore.showMobileView && !simulatorMobileStore.isCopy"
+    >
+    <i class="fa-solid fa-copy"></i>
+    </v-btn>
+
+    <v-btn
+      class="select-mul-btn"
+      @mousedown="() => {
+        simulatorMobileStore.isCopy = false;
+      }"
+      :style="{bottom: simulatorMobileStore.showElementsPanel ? '16rem' : '8rem'}"
+      v-if="simulatorMobileStore.showMobileView && simulatorMobileStore.isCopy"
+    >
+    <i class="fa-solid fa-paste"></i>
+    </v-btn>
+
+    <ElementsPanelMobile v-if="simulatorMobileStore.showMobileView" />
 </template>
 
 <script lang="ts" setup>
@@ -173,14 +224,58 @@ import ReportIssue from './ReportIssue/ReportIssue.vue'
 import TestBenchPanel from './Panels/TestBenchPanel/TestBenchPanel.vue'
 import TestBenchCreator from './Panels/TestBenchPanel/TestBenchCreator.vue'
 import TestBenchValidator from './Panels/TestBenchPanel/TestBenchValidator.vue'
+import ElementsPanelMobile from './Panels/ElementsPanel/ElementsPanelMobile.vue'
+import { simulationArea } from '#/simulator/src/simulationArea'
 import { useLayoutStore } from '#/store/layoutStore'
+import { useSimulatorMobileStore } from '#/store/simulatorMobileStore'
 import { onMounted, ref } from 'vue'
 
 const layoutStore = useLayoutStore()
+const simulatorMobileStore = useSimulatorMobileStore()
 
 const layoutElementPanelRef = ref<HTMLElement | null>(null);
 
 onMounted(() => {
     layoutStore.layoutElementPanelRef = layoutElementPanelRef.value
 })
-</script>
\ No newline at end of file
+</script>
+
+<style scoped>
+.cir-ele-btn{
+    position: absolute;
+    right: 1.5rem;
+    bottom: 15rem;
+    z-index: 100;
+    background-color: var(--bg-toggle-btn-primary);
+    color: white;
+    border-radius: 100%;
+    font-size: 20px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+    transition: 0.3s;
+    padding: 1rem;
+    height: 4rem;
+    width: 4rem;
+}
+
+.select-mul-btn{
+    position: absolute;
+    left: 1.5rem;
+    bottom: 2rem;
+    z-index: 100;
+    background-color: var(--bg-toggle-btn-primary);
+    color: white;
+    border-radius: 100%;
+    font-size: 20px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+    transition: 0.3s;
+    padding: 1rem;
+    height: 4rem;
+    width: 4rem;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/Panels/ElementsPanel/ElementsPanelMobile.vue b/src/components/Panels/ElementsPanel/ElementsPanelMobile.vue
new file mode 100644
index 00000000..74240b81
--- /dev/null
+++ b/src/components/Panels/ElementsPanel/ElementsPanelMobile.vue
@@ -0,0 +1,223 @@
+<template>
+  <div
+      ref="elementsPanelRef"
+      class="noSelect defaultCursor draggable-panel-mobile draggable-panel-css modules ce-panel elementPanel elementsPanelMobile"
+      :style="{bottom: simulatorMobileStore.showElementsPanel ? '0' : '-12rem'}"
+  >
+      <div class="panel-body" style="padding: 0;">
+          <div style="position: relative" class="search-container">
+              <input
+                  v-model="elementInput"
+                  type="text"
+                  class="search-input mobile-search"
+                  :placeholder="
+                      $t('simulator.panel_body.circuit_elements.search')
+                  "
+              />
+              <span
+                  ><i
+                      v-if="elementInput"
+                      class="fas search-close fa-times-circle"
+                      @click="elementInput = ''"
+                  ></i
+              ></span>
+          </div>
+
+          <div class="element-category-tabs">
+            <div
+              v-for="category in panelData" :key="category[0]"
+              class="element-category-tab" @mousedown="selectCategory(category[1], category[0])"
+              :style="{backgroundColor: selectedCategoryName === category[0] ? 'var(--primary)' : '#eee', color: selectedCategoryName === category[0] ? 'white' : 'black'}"
+            >
+              {{ category[0] }}
+            </div>
+          </div>
+
+          <div class="mobile-icons">
+            <div>
+            <div
+              v-for="element in filteredElements"
+              :id="element.name"
+              :key="element.name"
+              :title="element.label"
+              class="icon logixModules"
+              @click="createElement(element.name)"
+              @mousedown="createElement(element.name)"
+              @mouseover="getTooltipText(element.name)"
+              @mouseleave="tooltipText = ''"
+            >
+              <img
+                :src="element.imgURL"
+                :alt="element.name"
+              />
+            </div>
+            </div>
+          </div>
+
+          <!-- <div
+              id="Help"
+              lines="one"
+              :class="tooltipText != 'null' ? 'show' : ''"
+          >
+              {{ tooltipText }}
+          </div> -->
+      </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { elementHierarchy } from '#/simulator/src/metadata'
+import { simulationArea } from '#/simulator/src/simulationArea'
+import { uxvar } from '#/simulator/src/ux'
+import modules from '#/simulator/src/modules'
+import { onBeforeMount, onMounted, ref, computed } from 'vue'
+import { useLayoutStore } from '#/store/layoutStore'
+import { useSimulatorMobileStore } from '#/store/simulatorMobileStore'
+var panelData = []
+window.elementPanelList = []
+const layoutStore = useLayoutStore()
+const simulatorMobileStore = useSimulatorMobileStore()
+
+const elementsPanelRef = ref<HTMLElement | null>(null);
+const selectedCategory = ref(null)
+const selectedCategoryName = ref('Input')
+
+
+const filteredElements = computed(() => {
+  const elements = selectedCategory.value ? selectedCategory.value : panelData[0][1]
+  return elements.filter(element => {
+    const elementNameLower = element.name.toLowerCase()
+    const elementInputLower = elementInput.value.toLowerCase()
+    return elementNameLower.includes(elementInputLower)
+  })
+})
+
+onBeforeMount(() => {
+  for (const category in elementHierarchy) {
+      var categoryData = []
+      for (let i = 0; i < elementHierarchy[category].length; i++) {
+          const element = elementHierarchy[category][i]
+          if (!element.name.startsWith('verilog')) {
+              window.elementPanelList.push(element.label)
+              element['imgURL'] = getImgUrl(element.name)
+              categoryData.push(element)
+          }
+      }
+      panelData.push([category, categoryData])
+  }
+})
+
+onMounted(() => {
+  layoutStore.elementsPanelRef = elementsPanelRef.value
+})
+
+function selectCategory(categoryData, categoryName) {
+  selectedCategory.value = categoryData
+    selectedCategoryName.value = categoryName
+}
+
+function getImgUrl(elementName) {
+  const elementImg = new URL(
+      `../../../assets/img/${elementName}.svg`,
+      import.meta.url
+  ).href
+  return elementImg
+}
+
+var elementInput = ref('')
+
+function createElement(elementName) {
+  if (simulationArea.lastSelected && simulationArea.lastSelected.newElement)
+      simulationArea.lastSelected.delete()
+  var obj = new modules[elementName]()
+  simulationArea.lastSelected = obj
+  uxvar.smartDropXX += 70
+  if (uxvar.smartDropXX / globalScope.scale > width) {
+      uxvar.smartDropXX = 50
+      uxvar.smartDropYY += 80
+  }
+}
+
+const tooltipText = ref('null')
+function getTooltipText(elementName) {
+  tooltipText.value = modules[elementName].prototype.tooltipText
+}
+</script>
+
+<style scoped>
+.v-expansion-panel-title {
+  min-height: 36px;
+}
+
+.elementsPanelMobile{
+  top: unset !important;
+  left: 0;
+  width: 100%;
+  transition: all 0.3s;
+}
+
+.element-category-tabs {
+    display: flex;
+    padding: 0 10px;
+    overflow-x: scroll;
+    white-space: nowrap;
+    justify-content: space-between;
+    gap: 0.5rem;
+}
+
+.element-category-tabs::-webkit-scrollbar, .mobile-icons::-webkit-scrollbar {
+    height: 0px;
+}
+
+.element-category-tabs::-webkit-scrollbar-thumb, .mobile-icons::-webkit-scrollbar-thumb {
+    background-color: transparent;
+    border-radius: 4px;
+}
+
+.element-category-tabs::-webkit-scrollbar-track, .mobile-icons::-webkit-scrollbar-track {
+    background-color: transparent;
+}
+
+.element-category-tabs, .mobile-icons {
+    scrollbar-width: none;
+    scrollbar-color: transparent transparent;
+}
+
+.element-category-tab {
+    padding: 10px 0;
+    cursor: pointer;
+    width: 7.5rem;
+    font-size: 0.75rem;
+    flex-shrink: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.mobile-icons{
+    display: flex;
+    justify-content: space-between;
+    gap: 0.1rem;
+    overflow-x: auto;
+    white-space: nowrap;
+}
+
+.mobile-icons .icon{
+    width: 50px;
+    height: 50px;
+    margin: 10px;
+    cursor: pointer;
+    flex-shrink: 0;
+}
+
+.mobile-search {
+    width: 98vw;
+    margin: 0;
+    color: black;
+}
+
+.search-container {
+    padding: 0.5rem;
+    color: black;
+}
+</style>
diff --git a/src/components/ReportIssue/ReportIssueButton.vue b/src/components/ReportIssue/ReportIssueButton.vue
index 128b6288..69148088 100644
--- a/src/components/ReportIssue/ReportIssueButton.vue
+++ b/src/components/ReportIssue/ReportIssueButton.vue
@@ -5,6 +5,7 @@
             class="btn btn-primary text-light"
             data-toggle="modal"
             data-target=".issue"
+            :style="{ bottom: simulatorMobileStore.showElementsPanel ? '250px' : '120px' }"
             @click="openReportingModal"
         >
             <span class="fa fa-bug"></span>&nbsp;&nbsp;{{
@@ -15,6 +16,9 @@
 </template>
 
 <script lang="ts" setup>
+import { useSimulatorMobileStore } from '#/store/simulatorMobileStore';
+
+const simulatorMobileStore = useSimulatorMobileStore();
 
 const emit = defineEmits(['openReportModal'])
 
diff --git a/src/pages/simulatorHandler.vue b/src/pages/simulatorHandler.vue
index d9e935ed..b0c7dea3 100644
--- a/src/pages/simulatorHandler.vue
+++ b/src/pages/simulatorHandler.vue
@@ -19,14 +19,16 @@ export function getToken(name: string) {
 
 <script setup lang="ts">
 import simulator from './simulator.vue'
-import { onBeforeMount, ref } from 'vue'
+import { onBeforeMount, ref, onMounted } from 'vue'
 import { useRoute } from 'vue-router'
 import { useAuthStore } from '#/store/authStore'
+import { useSimulatorMobileStore } from '#/store/simulatorMobileStore'
 
 const route = useRoute()
 const hasAccess = ref(true)
 const isLoading = ref(true)
 const authStore = useAuthStore()
+const simulatorMobileStore = useSimulatorMobileStore()
 
 // check if user has edit access to the project
 async function checkEditAccess() {
@@ -93,4 +95,12 @@ onBeforeMount(() => {
         isLoading.value = false
     }
 })
+
+onMounted(() => {
+    window.addEventListener('resize', checkShowSidebar)
+})
+
+function checkShowSidebar() {
+    simulatorMobileStore.showMobileView = window.innerWidth < simulatorMobileStore.minWidthToShowSidebar ? true : false
+}
 </script>
diff --git a/src/store/simulatorMobileStore.ts b/src/store/simulatorMobileStore.ts
new file mode 100644
index 00000000..75c73486
--- /dev/null
+++ b/src/store/simulatorMobileStore.ts
@@ -0,0 +1,18 @@
+import { defineStore } from "pinia";
+import { ref } from "vue";
+
+export const useSimulatorMobileStore = defineStore("simulatorMobileStore", () => {
+  const showElementsPanel = ref(false);
+  const minWidthToShowSidebar = ref(992);
+  const showMobileView = ref(false);
+  const isCopy = ref(false);
+
+  showMobileView.value = window.innerWidth < minWidthToShowSidebar.value ? true : false
+
+  return {
+    showElementsPanel,
+    minWidthToShowSidebar,
+    showMobileView,
+    isCopy
+  };
+});
\ No newline at end of file
diff --git a/src/styles/color_theme.scss b/src/styles/color_theme.scss
index 5bdc9fff..69855bfc 100644
--- a/src/styles/color_theme.scss
+++ b/src/styles/color_theme.scss
@@ -138,6 +138,11 @@
     box-shadow: 0px 0px 10px #4545457f;
 }
 
+.draggable-panel-mobile {
+    background: white;
+    box-shadow: 0px 0px 10px #4545457f;
+}
+
 .panel-header {
     color: var(--text-panel);
     background: var(--primary);
diff --git a/src/styles/simulator.scss b/src/styles/simulator.scss
index af0fe667..c3f6ef1c 100644
--- a/src/styles/simulator.scss
+++ b/src/styles/simulator.scss
@@ -23,7 +23,6 @@ $fa-font-path: '../../node_modules/@fortawesome/fontawesome-free/webfonts';
     position: fixed;
     right: -119px;
     text-decoration: none;
-    bottom: 30px;
     transition: 0.3s;
     width: 160px;
     z-index: 999;