diff --git a/apps/profile/app/assets/warning.svg b/apps/profile/app/assets/warning.svg
new file mode 100644
index 0000000000..ff110c684e
--- /dev/null
+++ b/apps/profile/app/assets/warning.svg
@@ -0,0 +1,4 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="40" height="40" rx="20" fill="#FFF7ED"/>
+<path d="M20 17V19M20 23H20.01M13.0718 27H26.9282C28.4678 27 29.4301 25.3333 28.6603 24L21.7321 12C20.9623 10.6667 19.0378 10.6667 18.268 12L11.3398 24C10.57 25.3333 11.5322 27 13.0718 27Z" stroke="#EF4444" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/apps/profile/app/components/accounts/SaveButton.tsx b/apps/profile/app/components/accounts/SaveButton.tsx
index 6418f6da5e..1efb7ea247 100644
--- a/apps/profile/app/components/accounts/SaveButton.tsx
+++ b/apps/profile/app/components/accounts/SaveButton.tsx
@@ -1,6 +1,6 @@
-import { Button } from '@kubelt/design-system'
+import { Button } from '@kubelt/design-system/src/atoms/buttons/Button'
 
-const SaveButton = ({ isFormChanged, discardFn }: any) => {
+const SaveButton = ({ isFormChanged, discardFn, size = 'xl' }: any) => {
   return (
     <>
       {/* Form where this button is used should have 
@@ -19,7 +19,7 @@ const SaveButton = ({ isFormChanged, discardFn }: any) => {
               <Button
                 type="reset"
                 btnType={'secondary'}
-                btnSize={'xl'}
+                btnSize={size}
                 className="!text-gray-600 border-none mb-4 lg:mb-0"
                 onClick={discardFn}
               >
@@ -29,7 +29,7 @@ const SaveButton = ({ isFormChanged, discardFn }: any) => {
             <Button
               isSubmit
               btnType={'primary'}
-              btnSize={'xl'}
+              btnSize={size}
               className="mb-4 lg:mb-0"
             >
               Save
@@ -40,7 +40,7 @@ const SaveButton = ({ isFormChanged, discardFn }: any) => {
             <Button
               isSubmit
               btnType={'primary'}
-              btnSize={'xl'}
+              btnSize={size}
               className="mb-4 lg:mb-0"
               disabled
             >
diff --git a/apps/profile/app/components/accounts/UnsavedChangesModal.tsx b/apps/profile/app/components/accounts/UnsavedChangesModal.tsx
new file mode 100644
index 0000000000..bbb5442c85
--- /dev/null
+++ b/apps/profile/app/components/accounts/UnsavedChangesModal.tsx
@@ -0,0 +1,37 @@
+import React from 'react'
+import { Modal } from '@kubelt/design-system/src/molecules/modal/Modal'
+import SaveButton from './SaveButton'
+import { Text } from '@kubelt/design-system'
+
+import warn from '~/assets/warning.svg'
+
+const UnsavedChangesModal = ({ isOpen, handleClose }) => {
+  return (
+    <Modal isOpen={isOpen} handleClose={handleClose}>
+      <div className="relative bg-white lg:w-[32rem] rounded-xl pb-3 pr-6">
+        <div className="relative bg-white rounded-xl pl-6 pt-6">
+          <div className="mb-[53px] flex flex-row items-start">
+            <img src={warn} alt="warning" className="mr-4" />
+            <div className="flex flex-col items-start">
+              <Text size="lg" className="text-gray-900 mb-2">
+                You have Unsaved Changes
+              </Text>
+              <Text size="sm" className="text-gray-500 text-left">
+                You have made some changes. Do you want to discard or save them?
+              </Text>
+            </div>
+          </div>
+          <SaveButton
+            size="l"
+            isFormChanged={true}
+            discardFn={() => {
+              console.log('hey')
+            }}
+          />
+        </div>
+      </div>
+    </Modal>
+  )
+}
+
+export default UnsavedChangesModal
diff --git a/apps/profile/app/components/conditional-tooltip.tsx b/apps/profile/app/components/conditional-tooltip.tsx
index fa6030f2b4..02ecf982c0 100644
--- a/apps/profile/app/components/conditional-tooltip.tsx
+++ b/apps/profile/app/components/conditional-tooltip.tsx
@@ -4,7 +4,6 @@ type ConditionalTooltipProps = {
   children: any
   condition: boolean
   content: string
-  placement: string
   trigger?: 'hover' | 'click'
 }
 
@@ -18,10 +17,10 @@ const ConditionalTooltip = ({
   return condition ? (
     <Tooltip
       content={content}
-      placement={placement}
+      // placement=
       // without `text-black` text gets white on white bg
       // ¯\_(ツ)_/¯
-      className="text-black"
+      className="text-black bg-white !font-mono"
       trigger={trigger}
     >
       {children}
diff --git a/apps/profile/app/routes/$profile[.]json.tsx b/apps/profile/app/routes/$profile[.]json.tsx
index 50abd5ae41..1e201b98a8 100644
--- a/apps/profile/app/routes/$profile[.]json.tsx
+++ b/apps/profile/app/routes/$profile[.]json.tsx
@@ -1,4 +1,4 @@
-import { LoaderFunction } from '@remix-run/cloudflare'
+import type { LoaderFunction } from '@remix-run/cloudflare'
 import { loader as profileLoader } from '~/routes/$profile.json'
 
 export const loader: LoaderFunction = profileLoader
diff --git a/apps/profile/app/routes/account/gallery.tsx b/apps/profile/app/routes/account/gallery.tsx
index ab1eefd527..628068c0e2 100644
--- a/apps/profile/app/routes/account/gallery.tsx
+++ b/apps/profile/app/routes/account/gallery.tsx
@@ -120,15 +120,6 @@ const Nft = forwardRef(
      * It re-renders this small component quite often
      * every time user changes screen size
      */
-    const [width, setWidth] = useState(0)
-    useLayoutEffect(() => {
-      function updateSize() {
-        setWidth(window.innerWidth)
-      }
-      window.addEventListener('resize', updateSize)
-      updateSize()
-      return () => window.removeEventListener('resize', updateSize)
-    }, [])
 
     const inlineStyles = {
       opacity: faded ? '0.2' : isDragging ? '0' : '1',
@@ -138,7 +129,6 @@ const Nft = forwardRef(
        * Don't know how to write it better so keep it for now
        */
       height: '100%',
-
       ...style,
     }
     return (
diff --git a/apps/profile/app/routes/account/settings/integrations.tsx b/apps/profile/app/routes/account/settings/integrations.tsx
index 2f65a86a16..b9a34256ce 100644
--- a/apps/profile/app/routes/account/settings/integrations.tsx
+++ b/apps/profile/app/routes/account/settings/integrations.tsx
@@ -1,5 +1,3 @@
-
-
 export default function AccountSettingsIntegrations() {
   return (
     <>Connection Integrations</>
diff --git a/apps/profile/app/routes/account/settings/links.tsx b/apps/profile/app/routes/account/settings/links.tsx
index eab78f7049..65cf8d0bd3 100644
--- a/apps/profile/app/routes/account/settings/links.tsx
+++ b/apps/profile/app/routes/account/settings/links.tsx
@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react'
+import React, { useState, useEffect } from 'react'
 
 import type { ActionFunction } from 'react-router-dom'
 import {
@@ -8,6 +8,24 @@ import {
   useActionData,
 } from '@remix-run/react'
 
+import {
+  useSensor,
+  useSensors,
+  DndContext,
+  closestCenter,
+  KeyboardSensor,
+  MouseSensor,
+  TouchSensor,
+} from '@dnd-kit/core'
+import {
+  useSortable,
+  arrayMove,
+  SortableContext,
+  verticalListSortingStrategy,
+  sortableKeyboardCoordinates,
+} from '@dnd-kit/sortable'
+import { CSS } from '@dnd-kit/utilities'
+
 import { requireJWT } from '~/utils/session.server'
 import { PlatformJWTAssertionHeader } from '@kubelt/platform-middleware/jwt'
 import { getGalaxyClient } from '~/helpers/clients'
@@ -16,6 +34,7 @@ import { HiOutlineTrash } from 'react-icons/hi'
 import { RxDragHandleDots2 } from 'react-icons/rx'
 import { FiEdit } from 'react-icons/fi'
 import { TbLink } from 'react-icons/tb'
+import { AiOutlinePlus } from 'react-icons/ai'
 
 import { Button } from '@kubelt/design-system/src/atoms/buttons/Button'
 import { Text } from '@kubelt/design-system/src/atoms/text/Text'
@@ -56,11 +75,13 @@ export const action: ActionFunction = async ({ request }) => {
   const remainedLinks: any = JSON.parse(formData.get('links'))
 
   const updatedLinks: any = remainedLinks.concat(
-    updatedNames.map((name: string, i: number) => ({
-      name,
-      url: updatedUrls[i],
-      verified: false,
-    }))
+    updatedNames.map((name: string, i: number) => {
+      return {
+        name,
+        url: updatedUrls[i],
+        verified: false,
+      }
+    })
   )
 
   const errors = {}
@@ -85,7 +106,6 @@ export const action: ActionFunction = async ({ request }) => {
   if (Object.keys(errors).length) {
     return { errors }
   }
-
   const galaxyClient = await getGalaxyClient()
   const profileRes = await galaxyClient.getProfile(undefined, {
     'KBT-Access-JWT-Assertion': jwt,
@@ -111,18 +131,124 @@ export const action: ActionFunction = async ({ request }) => {
   return { updatedLinks }
 }
 
+const SortableLink = (props: any) => {
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+    isDragging,
+  } = useSortable({ id: props.id })
+
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+  }
+
+  return (
+    <div
+      className={`
+                   border border-gray-300 rounded-md
+                    px-4 py-3 mb-3 truncate bg-white
+                    flex flex-row items-center justify-between z-100
+                    ${isDragging ? 'shadow-xl ' : ''}
+                     `}
+      ref={setNodeRef}
+      style={style}
+    >
+      <div className={`flex flex-row items-center w-full truncate`}>
+        <button
+          className="text-gray-400"
+          type="button"
+          {...attributes}
+          {...listeners}
+        >
+          <RxDragHandleDots2 size={22} className="mr-[14px]" />{' '}
+        </button>
+        <Tooltip content="Copy" className="text-black">
+          <button
+            type="button"
+            className="bg-gray-100 hover:bg-gray-200 transition-colors
+              w-[2.25rem] h-[2.25rem] mr-[14px] rounded-full
+              text-gray-700
+        flex items-center justify-center "
+            onClick={() => {
+              navigator.clipboard.writeText(props.link.url)
+            }}
+          >
+            <TbLink size={22} />
+          </button>
+        </Tooltip>
+        <div className="flex flex-col max-w-[600px]">
+          <Text weight="medium" className="truncate">
+            {props.link.name}
+          </Text>
+          <Text className="text-gray-500 truncate">{props.link.url}</Text>
+        </div>
+      </div>
+      {/* // Puts current link in "modification" regyme */}
+      <Button
+        className="mr-4 h-[40px]
+                      bg-gray-100 focus:bg-gray-100 border-none
+                      flex flex-row items-center justify-around
+                      text-gray-600"
+        btnType="secondary-alt"
+        btnSize="base"
+        onClick={() => {
+          props.setLinks(
+            props.links.filter((link, id) => id !== parseInt(props.id))
+          )
+          props.setNewLinks([
+            ...props.newLinks,
+            props.links[parseInt(props.id)],
+          ])
+        }}
+      >
+        <FiEdit size={18} />
+        Edit
+      </Button>
+    </div>
+  )
+}
+
 export default function AccountSettingsLinks() {
   const { notificationHandler } = useOutletContext<any>()
   const transition = useTransition()
   const actionData = useActionData()
 
-  const [links, setLinks] = useState(
-    useRouteData<ProfileData>('routes/account')?.links || []
+  const sensors = useSensors(
+    useSensor(MouseSensor),
+    useSensor(TouchSensor),
+    useSensor(KeyboardSensor, {
+      coordinateGetter: sortableKeyboardCoordinates,
+    })
   )
 
+  const initialOldLinks =
+    useRouteData<ProfileData>('routes/account')?.links || []
+
+  const [links, setLinks] = useState(initialOldLinks)
+
+  const handleDragEnd = (event: any) => {
+    const { active, over } = event
+    const active_id = parseInt(active.id)
+    const over_id = parseInt(over.id)
+
+    if (active_id !== over_id) {
+      setLinks((links) => {
+        const oldIndex = parseInt(active.id)
+        const newIndex = parseInt(over.id)
+
+        return arrayMove(links, oldIndex, newIndex)
+      })
+      setFormChanged(true)
+    }
+  }
+
   const [isFormChanged, setFormChanged] = useState(false)
 
-  const initialLinks = [{ name: '', url: '', verified: false }]
+  const initialLinks: any[] = []
 
   const [newLinks, setNewLinks] = useState(initialLinks)
 
@@ -144,7 +270,6 @@ export default function AccountSettingsLinks() {
       >
         Connected Account Links
       </Text>
-      <div></div>
       <Text
         size="base"
         weight="semibold"
@@ -164,6 +289,34 @@ export default function AccountSettingsLinks() {
         className="relative min-h-[35.563rem]"
       >
         <div className="flex flex-col">
+          {/* Links that are already in account DO */}
+          <div className="flex flex-col mb-3">
+            <DndContext
+              sensors={sensors}
+              collisionDetection={closestCenter}
+              onDragEnd={handleDragEnd}
+            >
+              <SortableContext
+                items={links.map((link, id) => `${id}`)}
+                strategy={verticalListSortingStrategy}
+              >
+                {(links || []).map((link: any, i: number) => (
+                  <SortableLink
+                    key={`${link.name || 'My Website'}-${
+                      link.url || 'https://mywebsite.com'
+                    }-${i}`}
+                    id={`${i}`}
+                    link={link}
+                    links={links}
+                    setNewLinks={setNewLinks}
+                    setLinks={setLinks}
+                    newLinks={newLinks}
+                  />
+                ))}
+              </SortableContext>
+            </DndContext>
+          </div>
+          <input type="hidden" name="links" value={JSON.stringify(links)} />
           {newLinks.map((link: any, i: number) => {
             //Check if there is an error
             const isError = actionData?.errors && actionData?.errors[`${i}`]
@@ -174,7 +327,7 @@ export default function AccountSettingsLinks() {
                   link.url || 'https://mywebsite.com'
                 }-${i}`}
                 className="
-              flex flex-col w-full 
+              flex flex-col w-full
               sm:flex-row sm:w-full sm:justify-start sm:items-center
               mb-4 py-3 px-3 truncate
               rounded-md border border-gray-300 "
@@ -237,80 +390,26 @@ export default function AccountSettingsLinks() {
               </div>
             )
           })}
-          {/* Links that are already in account DO */}
-          <div className="flex flex-col mb-3">
-            {(links || []).map((link: any, i: number) => (
-              <div
-                key={`${link.name || 'My Website'}-${
-                  link.url || 'https://mywebsite.com'
-                }-${i}`}
-                className="
-              border border-gray-300 rounded-md
-              px-4 py-3 mb-3 truncate
-               flex flex-row items-center justify-between
-               "
-              >
-                <div className="flex flex-row items-center w-full truncate">
-                  <button className="text-gray-400">
-                    <RxDragHandleDots2 size={22} className="mr-[14px]" />{' '}
-                  </button>
-                  <Tooltip content="Copy" className="text-black">
-                    <button
-                      type="button"
-                      className="bg-gray-100 hover:bg-gray-200 transition-colors 
-                    w-[2.25rem] h-[2.25rem] mr-[14px] rounded-full
-                    text-gray-700
-              flex items-center justify-center "
-                      onClick={() => {
-                        navigator.clipboard.writeText(link.url)
-                      }}
-                    >
-                      <TbLink size={22} />
-                    </button>
-                  </Tooltip>
-                  <div className="flex flex-col w-max-[600px]">
-                    <Text weight="medium" className="truncate">
-                      {link.name}
-                    </Text>
-                    <Text className="text-gray-500 truncate">{link.url}</Text>
-                  </div>
-                </div>
-                {/* Puts current link in "modification" regyme */}
-                <Button
-                  className="mr-4 h-[40px]
-                bg-gray-100 focus:bg-gray-100 border-none
-                flex flex-row items-center justify-around
-                text-gray-600"
-                  btnType="secondary-alt"
-                  btnSize="base"
-                  onClick={() => {
-                    setLinks(links.filter((link, id) => id !== i))
-                    setNewLinks([...newLinks, links[i]])
-                  }}
-                >
-                  <FiEdit size={18} />
-                  Edit
-                </Button>
-              </div>
-            ))}
-          </div>
-          <input type="hidden" name="links" value={JSON.stringify(links)} />
-          <button
+          <Button
             type="button"
             onClick={() => {
               setNewLinks([...newLinks, { name: '', url: '', verified: false }])
             }}
-            className="right-0 text-indigo-500 text-base w-max
-          text-left"
+            btnType={'secondary'}
+            btnSize={'xl'}
+            className="right-0 !text-gray-600
+            border-none mb-4 lg:mb-0 w-max text-left
+            flex flew-row items-center justify-between"
           >
-            + Add More
-          </button>
+            <AiOutlinePlus size={22} className="mr-[11px]" /> Add Link
+          </Button>
         </div>
 
         <SaveButton
           isFormChanged={isFormChanged}
           discardFn={() => {
             setNewLinks(initialLinks)
+            setLinks(initialOldLinks)
           }}
         />
       </Form>
diff --git a/platform/galaxy/src/schema/resolvers/profile.ts b/platform/galaxy/src/schema/resolvers/profile.ts
index bd5bbe592f..2db4be2cf3 100644
--- a/platform/galaxy/src/schema/resolvers/profile.ts
+++ b/platform/galaxy/src/schema/resolvers/profile.ts
@@ -38,6 +38,7 @@ const profileResolvers: Resolvers = {
       let accountProfile = await accountClient.getProfile.query({
         account: accountURN,
       })
+      console.log('form Profile', accountProfile)
       return accountProfile
     },
     profileFromAddress: async (
@@ -50,6 +51,7 @@ const profileResolvers: Resolvers = {
           'X-3RN': addressURN,
         },
       })
+      console.log('From resolver', addressURN)
       const accountURN = await addressClient.getAccount.query()
 
       // return the address profile if no account is associated with the address