diff --git a/package.json b/package.json
index 9d078b29..e198be6a 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "gscale",
   "license": "MIT",
-  "version": "2.1.4",
+  "version": "2.2.0",
   "scripts": {
     "pre": "npm run gen:version",
     "dev": "npm run pre && vite",
@@ -26,7 +26,8 @@
     "dexie": "^3.2.0",
     "fuse.js": "^6.4.6",
     "vue": "^3.2.16",
-    "vue-router": "^4"
+    "vue-router": "^4",
+    "vuedraggable": "^4.1.0"
   },
   "devDependencies": {
     "@types/lodash": "^4.14.178",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index d437d67c..608adf9c 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -25,6 +25,7 @@ specifiers:
   vue: ^3.2.16
   vue-router: ^4
   vue-tsc: ^0.3.0
+  vuedraggable: ^4.1.0
   windicss: ^3.2.0
 
 dependencies:
@@ -36,6 +37,7 @@ dependencies:
   fuse.js: 6.4.6
   vue: 3.2.24
   vue-router: 4.0.12_vue@3.2.24
+  vuedraggable: 4.1.0_vue@3.2.24
 
 devDependencies:
   '@types/lodash': 4.14.178
@@ -2159,6 +2161,10 @@ packages:
     engines: {node: '>=8'}
     dev: true
 
+  /sortablejs/1.14.0:
+    resolution: {integrity: sha512-pBXvQCs5/33fdN1/39pPL0NZF20LeRbLQ5jtnheIPN9JQAaufGjKdWduZn4U7wCtVuzKhmRkI0DFYHYRbB2H1w==}
+    dev: false
+
   /source-map-js/1.0.1:
     resolution: {integrity: sha512-4+TN2b3tqOCd/kaGRJ/sTYA0tR0mdXx26ipdolxcwtJVqEnqNYvlCAt1q3ypy4QMlYus+Zh34RNtYLoq2oQ4IA==}
     engines: {node: '>=0.10.0'}
@@ -2597,6 +2603,15 @@ packages:
       '@vue/shared': 3.2.24
     dev: false
 
+  /vuedraggable/4.1.0_vue@3.2.24:
+    resolution: {integrity: sha512-FU5HCWBmsf20GpP3eudURW3WdWTKIbEIQxh9/8GE806hydR9qZqRRxRE3RjqX7PkuLuMQG/A7n3cfj9rCEchww==}
+    peerDependencies:
+      vue: ^3.0.1
+    dependencies:
+      sortablejs: 1.14.0
+      vue: 3.2.24
+    dev: false
+
   /webpack-virtual-modules/0.4.3:
     resolution: {integrity: sha512-5NUqC2JquIL2pBAAo/VfBP6KuGkHIZQXW/lNKupLPfhViwh8wNsu0BObtl09yuKZszeEUfbXz8xhrHvSG16Nqw==}
     dev: true
diff --git a/src/App.vue b/src/App.vue
index f1bcae5e..12854ac6 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -14,6 +14,7 @@ import TheFooter from "./components/TheFooter.vue";
 
 <style>
 /* @import url(./assets/fonts/OpenSans.css); */
+@import url(./styles/global.less);
 @import url(./styles/transition/fade.css);
 @import url(./styles/transition/build-preview.css);
 @import url(./styles/dark.css);
diff --git a/src/components/ItemCardClickable.vue b/src/components/ItemCardClickable.vue
index dc109df7..fa0be262 100644
--- a/src/components/ItemCardClickable.vue
+++ b/src/components/ItemCardClickable.vue
@@ -22,7 +22,12 @@ const tooltip = computed(() => {
 </script>
 
 <template>
-  <div v-tooltip="tooltip" class="cursor-pointer m-1 relative select-none" @click="$emit('click', fillAmount)">
+  <div
+    v-tooltip="tooltip"
+    class="cursor-pointer m-1 relative select-none focus-visible:ring"
+    tabindex="0"
+    @click="$emit('click', fillAmount)"
+  >
     <ItemCard :itemWithAmount="item" :grayscale="done" class="!m-0" />
     <div
       :class="[
diff --git a/src/components/character/CharacterBuildPreview.vue b/src/components/character/CharacterBuildPreview.vue
index 506eceb1..b82525b1 100644
--- a/src/components/character/CharacterBuildPreview.vue
+++ b/src/components/character/CharacterBuildPreview.vue
@@ -16,10 +16,19 @@ import ItemChecklist from "../ItemChecklist.vue";
 import RangeLevelDisplay from "../levelRange/display/RangeLevelDisplay.vue";
 import RangeTalentDisplay from "../levelRange/display/RangeTalentDisplay.vue";
 import Modal from "../Modal.vue";
+import HandleIcon from "../icons/HandleIcon.vue";
 
-const props = defineProps<{ character: ICharacter | ITraveler; items: ItemWithAmount[]; data: Build }>();
+const props =
+  defineProps<{ character: ICharacter | ITraveler; items: ItemWithAmount[]; data: Build; handle?: boolean }>();
 const emit = defineEmits(["deleted"]);
 
+watch(
+  () => props.data.order,
+  (value) => {
+    console.log(value);
+  }
+);
+
 //#region Deleting
 const deleteBuild = async () => {
   if (props.data.id) {
@@ -109,7 +118,12 @@ const edit = () => {
             </div>
           </div>
         </div>
-        <div class="flex bg-dark-600/70 border-t-2 border-dark-300 py-3 px-6 justify-end">
+        <div class="flex bg-dark-600/70 border-t-2 border-dark-300 py-3 px-6 items-center">
+          <div class="flex-1">
+            <div title="Drag to reorder" class="w-max">
+              <HandleIcon class="cursor-move h-5 text-light-ternary w-5 handle" />
+            </div>
+          </div>
           <EButton look="ghost" element="neutral" class="mr-2 !h-9 !text-light-ternary" @click="deleteDialog.reveal">
             Delete
           </EButton>
diff --git a/src/components/icons/HandleIcon.vue b/src/components/icons/HandleIcon.vue
new file mode 100644
index 00000000..3df823e8
--- /dev/null
+++ b/src/components/icons/HandleIcon.vue
@@ -0,0 +1,5 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
+  </svg>
+</template>
diff --git a/src/lib/offlineDatabase/db.ts b/src/lib/offlineDatabase/db.ts
index da05609d..f3763b3b 100644
--- a/src/lib/offlineDatabase/db.ts
+++ b/src/lib/offlineDatabase/db.ts
@@ -11,6 +11,7 @@ import { Talent } from "../types/Talent";
 export interface Build {
   id?: number;
   order?: number;
+  orderChanged?: number;
   completed?: Array<ItemWithAmount>;
   type: string;
   entityId: string;
@@ -53,6 +54,10 @@ export class CustomDexie extends Dexie {
             }
           });
       });
+
+    this.version(3).stores({
+      builds: "++id, order, orderChanged, *completed, type, entityId, level, normal, elemental, burst",
+    });
   }
 }
 
diff --git a/src/lib/util/sortingBuilds.ts b/src/lib/util/sortingBuilds.ts
new file mode 100644
index 00000000..da79a7f6
--- /dev/null
+++ b/src/lib/util/sortingBuilds.ts
@@ -0,0 +1,9 @@
+import { Build } from "../offlineDatabase/db";
+
+export default (a: Build, b: Build) => {
+  if (a.order === b.order) {
+    return (b.orderChanged ?? 0) - (a.orderChanged ?? 0);
+  }
+
+  return (a.order ?? Infinity) - (b.order ?? Infinity);
+};
diff --git a/src/pages/Builds.vue b/src/pages/Builds.vue
index 8ed22e9b..06e1a37e 100644
--- a/src/pages/Builds.vue
+++ b/src/pages/Builds.vue
@@ -15,6 +15,8 @@ import Container from "../components/PageContainer";
 import { RouterLink } from "vue-router";
 import clearDb from "~/lib/dev/clearDb";
 import tonsOfBuilds from "~/lib/dev/tonsOfBuilds";
+import Draggable from "vuedraggable";
+import sortingBuilds from "~/lib/util/sortingBuilds";
 
 const DEV = import.meta.env.DEV;
 
@@ -23,10 +25,15 @@ const buildsReady = computed(() => buildsData.value !== undefined);
 
 const getBuilds = async () => {
   const buildsFromDb = await db.builds.where("type").equals("character").toArray();
-  buildsData.value = buildsFromDb.map((build) => {
+
+  let lastOrder = 0;
+  buildsData.value = buildsFromDb.sort(sortingBuilds).map((build) => {
     const character = repo.needCharacter(build.entityId);
     const items = totalBuildItems(character, build);
 
+    if (build.order) lastOrder = build.order;
+    else build.order = ++lastOrder;
+
     return {
       character,
       items,
@@ -64,6 +71,15 @@ const hideTotal = () => {
   scrollLock.value = false;
 };
 //#endregion
+
+const handleChange = async ({ moved }: { moved: { element: any; newIndex: number } }) => {
+  const element = toRaw(moved.element) as { character: ICharacter | ITraveler; items: ItemWithAmount[]; data: Build };
+  const timeChanged = Date.now();
+
+  console.log(`Moved ${element.character.name} to ${moved.newIndex} at ${timeChanged}`);
+
+  await db.builds.update(element.data.id!, { order: moved.newIndex, orderChanged: timeChanged });
+};
 </script>
 
 <template>
@@ -75,24 +91,35 @@ const hideTotal = () => {
     <div v-if="buildsData!.length > 0" class="flex space-x-2 mb-4">
       <GButton @click="showTotal">Show Total</GButton>
     </div>
-    <transition-group tag="div" name="build-preview" w:grid="gap-5 cols-2 <sm:cols-1" class="grid">
-      <CharacterBuildPreview
-        v-for="build in buildsData"
-        :key="build.data.id"
-        :character="build.character"
-        :items="build.items"
-        :data="build.data"
-        @deleted="onDelete"
-      />
-      <RouterLink
-        v-if="buildsData!.length < 2"
-        to="/"
-        class="border-dashed rounded-xl flex flex-col h-full border-4 border-dark-600 min-h-96 py-4 px-6 transition-colors text-light-ternary/70 block items-center justify-center hover:text-light-ternary"
-      >
-        <p class="font-bold text-xl">Add a new build</p>
-        <p class="font-bold text-xl">+</p>
-      </RouterLink>
-    </transition-group>
+    <Draggable
+      v-model="buildsData"
+      tag="transition-group"
+      :componentData="{ tag: 'div', name: 'build-preview' }"
+      class="grid gap-5 grid-cols-2 <sm:grid-cols-1"
+      :itemKey="(item: any) => item.data.id"
+      handle=".handle"
+      @change="handleChange"
+    >
+      <template #item="{ element }">
+        <CharacterBuildPreview
+          :key="element.data.id"
+          :character="element.character"
+          :items="element.items"
+          :data="element.data"
+          @deleted="onDelete"
+        />
+      </template>
+      <template #footer>
+        <RouterLink
+          v-if="buildsData!.length < 2"
+          to="/"
+          class="border-dashed rounded-xl flex flex-col h-full border-4 border-dark-600 min-h-96 py-4 px-6 transition-colors text-light-ternary/70 block items-center justify-center hover:text-light-ternary"
+        >
+          <p class="font-bold text-xl">Add a new build</p>
+          <p class="font-bold text-xl">+</p>
+        </RouterLink>
+      </template>
+    </Draggable>
   </Container>
   <teleport to="#modal">
     <PopOver
diff --git a/src/styles/global.less b/src/styles/global.less
new file mode 100644
index 00000000..2574ed4d
--- /dev/null
+++ b/src/styles/global.less
@@ -0,0 +1,4 @@
+.sortable-ghost {
+  transition: opacity 0.3s;
+  opacity: 0.6;
+}