diff --git a/.gitignore b/.gitignore
index 8c85756e..caf2e30b 100644
--- a/.gitignore
+++ b/.gitignore
@@ -40,3 +40,7 @@ yarn-error.log*
 # swiftlatex's postinstall files
 /public/*.js
 /public/*.wasm
+
+#vscode
+.vscode
+.history/**
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index 75df4a94..824e26b2 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -16,6 +16,7 @@
         "polished": "^4.2.2",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
+        "react-easy-sort": "^1.6.0",
         "react-hook-form": "^7.31.3",
         "react-icons": "^4.4.0",
         "react-pdf": "^5.7.2",
@@ -1701,6 +1702,17 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/array-move": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/array-move/-/array-move-3.0.1.tgz",
+      "integrity": "sha512-H3Of6NIn2nNU1gsVDqDnYKY/LCdWvCMMOWifNGhKcVQgiZ6nOek39aESOvro6zmueP07exSl93YLvkN4fZOkSg==",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/array-union": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/array-union/-/array-union-2.1.0.tgz",
@@ -4836,6 +4848,27 @@
         "react": "^18.2.0"
       }
     },
+    "node_modules/react-easy-sort": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/react-easy-sort/-/react-easy-sort-1.6.0.tgz",
+      "integrity": "sha512-zd9Nn90wVlZPEwJrpqElN87sf9GZnFR1StfjgNQVbSpR5QTSzCHjEYK6REuwq49Ip+76KOMSln9tg/ST2KLelg==",
+      "dependencies": {
+        "array-move": "^3.0.1",
+        "tslib": "2.0.1"
+      },
+      "engines": {
+        "node": ">=16"
+      },
+      "peerDependencies": {
+        "react": ">=16.4.0",
+        "react-dom": ">=16.4.0"
+      }
+    },
+    "node_modules/react-easy-sort/node_modules/tslib": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.0.1.tgz",
+      "integrity": "sha512-SgIkNheinmEBgx1IUNirK0TUD4X9yjjBRTqqjggWCU3pUEqIk3/Uwl3yRixYKT6WjQuGiwDv4NomL3wqRCj+CQ=="
+    },
     "node_modules/react-hook-form": {
       "version": "7.45.1",
       "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.45.1.tgz",
diff --git a/package.json b/package.json
index e2610204..52ae79fd 100644
--- a/package.json
+++ b/package.json
@@ -22,6 +22,7 @@
     "polished": "^4.2.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-easy-sort": "^1.6.0",
     "react-hook-form": "^7.31.3",
     "react-icons": "^4.4.0",
     "react-pdf": "^5.7.2",
diff --git a/src/components/generator/Sidebar.tsx b/src/components/generator/Sidebar.tsx
index bd21bf1d..b6b4081b 100644
--- a/src/components/generator/Sidebar.tsx
+++ b/src/components/generator/Sidebar.tsx
@@ -1,7 +1,10 @@
+import { useState } from 'react'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
 import styled from 'styled-components'
 import { MdDragIndicator } from 'react-icons/md'
+import arrayMove from 'array-move'
+import SortableList, { SortableItem, SortableKnob } from 'react-easy-sort'
 
 import { colors } from '../../theme'
 import { PrimaryButton, IconButton } from '../core/Button'
@@ -12,16 +15,16 @@ const Aside = styled.aside`
   padding: 24px 36px;
 `
 
-const Nav = styled.nav`
+// div targets the items inside the drag sort library
+const NavList = styled.nav`
   display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  justify-content: center;
-  gap: 24px;
   margin-bottom: 28px;
 
-  button {
-    cursor: grab;
+  .sort-list-wrapper {
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+    gap: 24px;
   }
 `
 
@@ -33,38 +36,79 @@ const StyledLink = styled(Link)<{ $active: boolean }>`
   ${(props) => props.$active && `color: ${colors.primary};`}
 `
 
+const DragIconButton = styled(IconButton)`
+  opacity: ${(props) => (props.disabled ? 0 : 1)};
+  cursor: ${(props) => (props.disabled ? 'default' : 'grab')};
+`
+
+const sections = [
+  { label: 'Templates', section: 'templates', isSortble: false },
+  { label: 'Profile', section: 'basics', isSortble: false },
+  { label: 'Education', section: 'education', isSortble: true },
+  { label: 'Work Experience', section: 'work', isSortble: true },
+  { label: 'Skills', section: 'skills', isSortble: true },
+  { label: 'Projects', section: 'projects', isSortble: true },
+  { label: 'Awards', section: 'awards', isSortble: true }
+]
+
+const NavItem = ({
+  label,
+  section,
+  currSection,
+  draggable
+}: {
+  label: string
+  section: string
+  currSection: string
+  draggable?: boolean
+}) => (
+  <div key={section} style={{ display: 'flex', gap: 8 }}>
+    <SortableKnob>
+      <DragIconButton type="button" disabled={!Boolean(draggable)}>
+        <MdDragIndicator />
+      </DragIconButton>
+    </SortableKnob>
+    <StyledLink
+      href={`/generator?section=${section}`}
+      $active={section === currSection}
+    >
+      {label}
+    </StyledLink>
+  </div>
+)
+
 export function Sidebar() {
   const router = useRouter()
-  const { section: currSection = 'basics' } = router.query
+  const currSection = (router.query.section || 'basics') as string
+  const [sortedSections, updateSectionOrder] = useState(sections)
 
-  const sectionLinks = [
-    { label: 'Templates', section: 'templates' },
-    { label: 'Profile', section: 'basics' },
-    { label: 'Education', section: 'education' },
-    { label: 'Work Experience', section: 'work' },
-    { label: 'Skills', section: 'skills' },
-    { label: 'Projects', section: 'projects' },
-    { label: 'Awards', section: 'awards' }
-  ]
+  const onSortEnd = (oldIndex: number, newIndex: number) => {
+    updateSectionOrder((array) => arrayMove(array, oldIndex, newIndex))
+  }
 
   return (
     <Aside>
-      <Nav>
-        {sectionLinks.map(({ label, section }) => (
-          <div key={section} style={{ display: 'flex', gap: 8 }}>
-            <IconButton type="button">
-              <MdDragIndicator />
-            </IconButton>
-            <StyledLink
-              href={`/generator?section=${section}`}
-              $active={section === currSection}
-            >
-              {label}
-            </StyledLink>
-          </div>
-        ))}
-      </Nav>
-
+      <NavList>
+        <SortableList
+          lockAxis="y"
+          onSortEnd={onSortEnd}
+          className="sort-list-wrapper"
+        >
+          {sortedSections.map(({ label, section, isSortble }) => (
+            <SortableItem key={section}>
+              <div className="sort-item-wrapper">
+                <NavItem
+                  draggable={isSortble}
+                  key={section}
+                  label={label}
+                  section={section}
+                  currSection={currSection}
+                />
+              </div>
+            </SortableItem>
+          ))}
+        </SortableList>
+      </NavList>
       <PrimaryButton form="resume-form">MAKE</PrimaryButton>
     </Aside>
   )