diff --git a/src/App.vue b/src/App.vue
index 329a2d0..c0de921 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -5,10 +5,69 @@
     <!--App Container-->
     <div class="flex flex-row text-center shadow-lg bg-white h-fit">
       <!--Sidebar -->
-      <router-view
-        @openRegionPage="openRegionPage"
-        @openStatePage="openStatePage"
-      ></router-view>
+      <div
+        class="hidden w-1/5 md:flex flex-col justify-between bg-gray-300 text-blue-400 border border-white border-x-2"
+      >
+      <div class="sticky left-0 top-0">
+        <div class="p-2 border-white border flex justify-center">
+          <img src="./assets/ces_logo.png" class="h-24 hover:scale-110" />
+        </div>
+        <div class="p-6 border-white border hover:text-white hover:bg-blue-400">
+          <router-link to="/">Home</router-link>
+        </div>
+        <div class="p-6 border-white border hover:text-white hover:bg-blue-400">
+          <router-link to="state-list">State List</router-link>
+        </div>
+        <div class="p-6 border-white border hover:text-white hover:bg-blue-400">
+          <router-link to="region-list">Region List</router-link>
+        </div>
+        <div class="p-6 border-white border hover:text-white hover:bg-blue-400">
+          <router-link to="trade-agreement">Trade Agreement</router-link>
+        </div>
+        <div class="p-6 border-white border hover:text-white hover:bg-blue-400">
+          <router-link to="resource-tier">Resource Tier</router-link>
+        </div>
+      </div>
+      </div>
+      <!--Content-->
+      <div class="md:w-4/5 w-full flex flex-col">
+        <router-view
+          :state-list="stateList"
+          :region-data="stateRegion"
+          :resource-list="resourceList"
+          :date="date"
+          :biome-list="biomeList"
+          :corruption-list="corruptionLevelList"
+          :development-list="developmentLevelList"
+          @advance-season="advanceSeason"
+          @add-region="addNewRegion"
+          @add-state="addNewState"
+          @open-state="openState()"
+          @save-new-resources="saveNewResources"
+        ></router-view>
+      </div>
+    </div>
+    <!--Sidebar Menu for small screen-->
+    <Teleport to="#app">
+    <div class="md:hidden flex flex-row 
+  justify-between sticky text-center bottom-0
+  bg-gray-200 mx-810 text-blue-400 border-2 border-white space-x-0">
+    
+        <div class="flex-1 py-4 border-white border hover:text-white hover:bg-blue-400">
+          <router-link to="/">Home</router-link>
+        </div>
+        <div class="flex-1 py-4 border-white border hover:text-white hover:bg-blue-400">
+          <router-link to="state-list">State List</router-link>
+        </div>
+        <div class="flex-1 py-4 border-white border hover:text-white hover:bg-blue-400">
+          <router-link to="region-list">Region List</router-link>
+        </div>
+        <div class="flex-1 py-4 border-white border hover:text-white hover:bg-blue-400">
+          <a href="">Trade Agreement</a>
+        </div>
+        <div class="flex-1 py-4 border-white border hover:text-white hover:bg-blue-400">
+          <a href="">Resource Tiers</a>
+        </div>
     </div>
   </div>
 </template>
@@ -26,6 +85,38 @@ export default {
     };
   },
   methods: {
+    addNewState(data){
+      let addStateData = {...data}
+      console.log(addStateData,'report')
+      window.ipcRenderer.send("State:addState",addStateData);
+      window.ipcRenderer.once("State:addStateOK", (e, res) => {
+        console.log(res,'state added')
+      });
+    },
+    addNewRegion(data){
+      const {regionName,stateId,corruptionId,biomeId,developmentId, population, taxRate, desc} = data
+      let addRegionObj = {
+        biome: {biomeId},
+        corruption: {corruptionId},
+        desc,
+        development: {developmentId},
+        population,
+        regionName,
+        state: {stateId},
+        taxRate
+      }
+      window.ipcRenderer.send("Region:addRegion",JSON.stringify(addRegionObj));
+      window.ipcRenderer.once("Region:addRegionOK", (e, res) => {
+        console.log(res,'legiun added')
+      });
+    },
+    saveNewResources(newResourceList){
+      console.log(newResourceList,'nueva resource list')
+      window.ipcRenderer.send("Resource:updateResourceAll",newResourceList);
+      window.ipcRenderer.once("Resource:updateResourceAllOK", (e, res) => {
+        console.log(res,'legiun added')
+      });
+    },
     setLanding() {
       this.hasLanded = true;
       localStorage.setItem("landed", true);
diff --git a/src/pages/Home/sections/ResourceTier.vue b/src/pages/Home/sections/ResourceTier.vue
index 000b6b9..15be5ec 100644
--- a/src/pages/Home/sections/ResourceTier.vue
+++ b/src/pages/Home/sections/ResourceTier.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="px-4 mx-auto lg:w-3/4 w-full text-center py-24 pt-16 flex flex-col space-y-5"
+    class="px-4 mx-auto lg:w-fit w-full text-center py-24 pt-16 flex flex-col space-y-5"
   >
     <h1 class="mb-4 text-4xl font-semibold tracking-tight leading-none">
       Resource Tier List
@@ -9,29 +9,210 @@
     <div class="md:grid-cols-6 sm:grid-cols-4 grid-cols-2 grid gap-4">
       <div
         class="flex flex-col space-y-2"
-        v-for="resourceTier in resourceList"
+        :class="{
+          'bg-blue-100': isDragging,
+          'bg-red-200': resourceTier.isDraggedOver,
+        }"
+        @dragover.prevent="dragOverList(resourceTier)"
+        @drop="onDragDrop(resourceTier, tierIndex)"
+        @dragleave="leaveDraggedOverList(resourceTier)"
+        @dragenter.prevent
+        v-for="(resourceTier, tierIndex) in tierResourceList"
         :key="resourceTier.ResourceTierID"
       >
         <h2 class="text-xl font-semibold border py-4 px-3 bg-black text-white">
           {{ resourceTier.ResourceTierName }}
         </h2>
         <div
-          v-for="resource in resourceTier.Resources"
+          @dragstart="startDrag(index, resourceTier, tierIndex)"
+          @dragend="stopDrag"
+          draggable="true"
+          v-for="(resource, index) in resourceTier.Resources"
           :key="resource.ResourceName"
-          class="border p-3 bg-gray-100"
+          class="border p-3 bg-gray-100 cursor-pointer"
+          :class="{
+            'bg-yellow-200':
+              resource.isChanged &&
+              resourceTier.ResourceTierID !== resource.originTierIndex,
+          }"
         >
           {{ resource.ResourceName }}
         </div>
       </div>
     </div>
+    <!--Deletion Area-->
+    <div
+      class="relative py-12 mx-auto border-2 border-red-500 bg-red-300 w-3/4"
+      :class="{'bg-red-400': isOnDeletion}"
+    
+      @drop="onDeleteResource(resourceTier, tierIndex)"
+      @dragleave="leaveDeletionArea"
+      @dragover.prevent="dragOverDelete"
+      @dragenter.prevent
+    >
+      <div class="w-full lg:grid-cols-4 md:grid-cols-3 sm:grid-cols-2 grid-cols-1 px-2 grid gap-4" v-if="deletedResourceList.length > 0">
+       
+          <div
+            @dragstart="startDrag(index, resourceTier, tierIndex)"
+            @dragend="stopDrag"
+            draggable="true"
+            v-for="(resource, index) in deletedResourceList"
+            :key="resource.ResourceName"
+            class="border p-3 bg-gray-100 cursor-pointer"
+            :class="{
+              'bg-yellow-200':
+                resource.isChanged &&
+                resourceTier.ResourceTierID !== resource.originTierIndex,
+            }"
+          >
+            {{ resource.ResourceName }}
+          </div>
+        </div>
+
+    </div>
+    <!--Add State Button Container-->
+    <div class="pt-2 flex justify-center space-x-2">
+      <button
+        type="button"
+        @click="toggleAddStateModal"
+        href="#"
+        class="inline-flex justify-center items-center py-4 px-5 text-base font-medium text-center text-white rounded-lg bg-green-700 hover:bg-green-800 focus:ring-4 focus:ring-blue-300 dark:focus:ring-green-900"
+      >
+        Add Resource
+      </button>
+      <button
+        v-if="isChanging"
+        type="button"
+        @click="onResourceSubmit"
+        href="#"
+        class="inline-flex justify-center items-center py-4 px-5 text-base font-medium text-center text-white rounded-lg bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-900"
+      >
+        Submit Changes
+      </button>
+    </div>
+    <!---->
   </div>
 </template>
 
 <script>
 export default {
   props: ["resourceList"],
+  emits: ["save-new-resources"],
   mounted() {
-    console.log(this.resourceList);
+    console.log(this.resourceList, "resources");
+    for (let tier of this.resourceList) {
+      tier.isDraggedOver = false;
+      for (let resources of tier.Resources) {
+        resources.isChanged = false;
+        resources.originTierIndex = tier.ResourceTierID;
+      }
+    }
+    this.tierResourceList = structuredClone(this.resourceList);
+    console.log(this.tierResourceList, "tier Resourcce list");
+  },
+  data() {
+    return {
+      isChanging: false,
+      isDragging: false,
+      isOnDeletion: false,
+      draggedResourceIdx: "",
+      originTierIdx: null,
+      targetTierIdx: null,
+      originTier: null,
+      tierResourceList: [],
+      deletedResourceList: [],
+    };
+  },
+  methods: {
+    startDrag(resourceIndex, tier, tierIndex) {
+      this.isDragging = true;
+      this.draggedResourceIdx = resourceIndex;
+
+      this.originTier = tier;
+      this.originTierIdx = tierIndex;
+    },
+    stopDrag() {
+      this.isDragging = false;
+      console.log("consolation");
+    },
+    dragOverList(tier) {
+      tier.isDraggedOver = true;
+    },
+    dragOverDelete(){
+      this.isOnDeletion = true;
+      
+    },
+    leaveDeletionArea(){
+      this.isOnDeletion = false
+    },  
+    leaveDraggedOverList(tier) {
+      tier.isDraggedOver = false;
+    },
+    onDragDrop(tier, index) {
+      this.targetTierIdx = index;
+
+      tier.isDraggedOver = false;
+      if (this.originTier.ResourceTierID === tier.ResourceTierID) {
+        return;
+      }
+
+      let newOriginTier = { ...this.originTier };
+
+      let targetElement = newOriginTier.Resources.splice(
+        this.draggedResourceIdx,1);
+      targetElement[0].isChanged = true;
+      targetElement[0].ResourceTierID = tier.ResourceTierID;
+    
+
+      let newTier = { ...tier };
+      newTier.Resources.push(targetElement[0]);
+      let newResourceTierList = structuredClone(this.tierResourceList);
+      newResourceTierList.splice(this.originTierIdx, 1, newOriginTier);
+      newResourceTierList.splice(this.targetTierIdx, 1, newTier);
+
+      this.tierResourceList = [...newResourceTierList];
+      this.isChanging = true;
+    },
+    onDeleteResource(){
+  
+      let deletedResource = this.tierResourceList[this.originTierIdx].Resources.splice(this.draggedResourceIdx,1)[0];
+      this.deletedResourceList.push(deletedResource);
+    },
+    onDragDropDelete() {
+      // this.targetTierIdx = index
+      // tier.isDraggedOver = false
+      // if (this.originTier.ResourceTierID === tier.ResourceTierID) {
+      //   return;
+      // }
+      // let newOriginTier = { ...this.originTier }
+      // console.log(this.draggedResourceIdx, 'television')
+      // let targetElement = newOriginTier.Resources.splice(this.draggedResourceIdx, 1)
+      // targetElement[0].isChanged = true;
+      // targetElement[0].ResourceTierID = tier.ResourceTierID
+      // console.log(targetElement, 'new guys')
+      // let newTier = { ...tier }
+      // newTier.Resources.push(targetElement[0])
+      // let newResourceTierList = structuredClone(this.tierResourceList);
+      // newResourceTierList.splice(this.originTierIdx, 1, newOriginTier)
+      // newResourceTierList.splice(this.targetTierIdx, 1, newTier)
+      // this.tierResourceList = [...newResourceTierList]
+      // this.isChanging = true;
+    },
+    onResourceSubmit() {
+      let newResources = [];
+      for (let tier of this.tierResourceList) {
+        for (let resource of tier.Resources) {
+          console.log(resource, "nueva resource");
+          newResources.push({
+            ResourceID: resource.ResourceID.toString(),
+            ResourceName: resource.ResourceName.toString(),
+            ResourceTierID: resource.ResourceTierID.toString(),
+          });
+        }
+      }
+      console.log(newResources, "new-result");
+      this.$emit("save-new-resources", newResources);
+    },
   },
 };
 </script>