diff --git a/.env.example b/.env.example
index 5c508803..238c2a0b 100644
--- a/.env.example
+++ b/.env.example
@@ -28,7 +28,8 @@ NEXT_PUBLIC_ZAPPER=osmo17qwvc70pzc9mudr8t02t3pl74hhqsgwnskl734p4hug3s8mkerdqzduf
 NEXT_PUBLIC_PARAMS=osmo1nlmdxt9ctql2jr47qd4fpgzg84cjswxyw6q99u4y4u4q6c2f5ksq7ysent
 NEXT_PUBLIC_PYTH_ENDPOINT=https://hermes.pyth.network/api
 NEXT_PUBLIC_MAINNET_REST=https://osmosis-node.marsprotocol.io/GGSFGSFGFG34/osmosis-rpc-front/
-NEXT_PUBLIC_CANDLES_ENDPOINT=https://osmosis-candles.marsprotocol.io/
+NEXT_PUBLIC_CANDLES_ENDPOINT_THE_GRAPH=https://osmosis-candles.marsprotocol.io/
+NEXT_PUBLIC_CANDLES_ENDPOINT_PYTH=https://benchmarks.pyth.network
 NEXT_PUBLIC_WALLET_CONNECT_ID=d93fdffb159bae5ec87d8fee4cdbb045
 CHARTING_LIBRARY_REPOSITORY=github.com/tradingview/charting_library
 CHARTING_LIBRARY_ACCESS_TOKEN=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
diff --git a/src/api/hls/getHLSStakingAccounts.ts b/src/api/hls/getHLSStakingAccounts.ts
index 180e049f..3b5ab3eb 100644
--- a/src/api/hls/getHLSStakingAccounts.ts
+++ b/src/api/hls/getHLSStakingAccounts.ts
@@ -13,12 +13,10 @@ export default async function getHLSStakingAccounts(
   const hlsAccountsWithStrategy: HLSAccountWithStrategy[] = []
 
   activeAccounts.forEach((account) => {
-    if (account.deposits.length === 0 || account.debts.length === 0) return
+    if (account.deposits.length === 0) return
 
     const strategy = hlsStrategies.find(
-      (strategy) =>
-        strategy.denoms.deposit === account.deposits.at(0).denom &&
-        strategy.denoms.borrow === account.debts.at(0).denom,
+      (strategy) => strategy.denoms.deposit === account.deposits.at(0).denom,
     )
 
     if (!strategy) return
diff --git a/src/api/swap/getSwapRoute.ts b/src/api/swap/getSwapRoute.ts
index 82c87f77..c5501c49 100644
--- a/src/api/swap/getSwapRoute.ts
+++ b/src/api/swap/getSwapRoute.ts
@@ -1,10 +1,5 @@
 import { getSwapperQueryClient } from 'api/cosmwasm-client'
 
-interface Route {
-  pool_id: string
-  token_out_denom: string
-}
-
 export default async function getSwapRoute(denomIn: string, denomOut: string): Promise<Route[]> {
   try {
     const swapperClient = await getSwapperQueryClient()
diff --git a/src/components/Account/Health/HealthTooltip.tsx b/src/components/Account/Health/HealthTooltip.tsx
index 6682990d..14a84dff 100644
--- a/src/components/Account/Health/HealthTooltip.tsx
+++ b/src/components/Account/Health/HealthTooltip.tsx
@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react'
+import React, { ReactElement, useMemo } from 'react'
 
 import { CircularProgress } from 'components/CircularProgress'
 import Text from 'components/Text'
@@ -8,7 +8,7 @@ import { BN } from 'utils/helpers'
 interface Props {
   health: number
   healthFactor: number
-  children: React.ReactNode
+  children: ReactElement
 }
 
 function HealthTooltipContent({ health, healthFactor }: { health: number; healthFactor: number }) {
diff --git a/src/components/Borrow/BorrowActionButtons.tsx b/src/components/Borrow/BorrowActionButtons.tsx
index 73c263a7..5d7c0c25 100644
--- a/src/components/Borrow/BorrowActionButtons.tsx
+++ b/src/components/Borrow/BorrowActionButtons.tsx
@@ -2,7 +2,7 @@ import { useCallback } from 'react'
 
 import Button from 'components/Button'
 import ActionButton from 'components/Button/ActionButton'
-import { Plus, ReceiptCheck } from 'components/Icons'
+import { HandCoins, Plus } from 'components/Icons'
 import useStore from 'store'
 import { getEnabledMarketAssets } from 'utils/assets'
 
@@ -37,7 +37,7 @@ export default function BorrowActionButtons(props: Props) {
         className='min-w-40 text-center'
       />
       {debt && (
-        <Button color='tertiary' leftIcon={<ReceiptCheck />} text='Repay' onClick={repayHandler} />
+        <Button color='tertiary' leftIcon={<HandCoins />} text='Repay' onClick={repayHandler} />
       )}
     </div>
   )
diff --git a/src/components/Button/DropDownButton.tsx b/src/components/Button/DropDownButton.tsx
index 0ea46a6e..d7fad7e2 100644
--- a/src/components/Button/DropDownButton.tsx
+++ b/src/components/Button/DropDownButton.tsx
@@ -2,6 +2,7 @@ import Button from 'components/Button'
 import { ChevronDown } from 'components/Icons'
 import Text from 'components/Text'
 import { Tooltip } from 'components/Tooltip'
+import useToggle from 'hooks/useToggle'
 
 interface Props extends ButtonProps {
   items: DropDownItem[]
@@ -9,6 +10,7 @@ interface Props extends ButtonProps {
 }
 
 export default function DropDownButton(props: Props) {
+  const [isOpen, toggleIsOpen] = useToggle(false)
   return (
     <Tooltip
       content={<DropDown {...props} />}
@@ -17,8 +19,15 @@ export default function DropDownButton(props: Props) {
       contentClassName='!bg-white/10 border border-white/20 backdrop-blur-xl !p-0'
       interactive
       hideArrow
+      visible={isOpen}
+      onClickOutside={() => toggleIsOpen(false)}
     >
-      <Button rightIcon={<ChevronDown />} iconClassName='w-3 h-3' {...props} />
+      <Button
+        onClick={() => toggleIsOpen()}
+        rightIcon={<ChevronDown />}
+        iconClassName='w-3 h-3'
+        {...props}
+      />
     </Tooltip>
   )
 }
@@ -43,7 +52,7 @@ function DropDownItem(props: DropDownItem) {
       onClick={props.onClick}
       className=' px-4 py-3 flex gap-2 items-center hover:bg-white/5 w-full [&:not(:last-child)]:border-b border-white/10'
     >
-      <div className='h-5 w-5 flex justify-center'>{props.icon}</div>
+      <div className='flex justify-center w-5 h-5'>{props.icon}</div>
       <Text size='sm'>{props.text}</Text>
     </button>
   )
diff --git a/src/components/Checkbox.tsx b/src/components/Checkbox.tsx
index 807b0586..0ca9b94d 100644
--- a/src/components/Checkbox.tsx
+++ b/src/components/Checkbox.tsx
@@ -13,13 +13,9 @@ interface Props {
 export default function Checkbox(props: Props) {
   return (
     <>
-      <label
-        className='flex items-center gap-2 border-white cursor-pointer'
-        htmlFor={`${props.name}-id}`}
-      >
+      <label className='flex items-center gap-2 border-white cursor-pointer'>
         <input
           onChange={() => props.onChange(props.checked)}
-          id={`${props.name}-id`}
           name={props.name}
           checked={props.checked}
           type='checkbox'
diff --git a/src/components/HLS/Farm/Table/Columns/Deposit.tsx b/src/components/HLS/Farm/Table/Columns/Deposit.tsx
index b9cc0d62..0a3541df 100644
--- a/src/components/HLS/Farm/Table/Columns/Deposit.tsx
+++ b/src/components/HLS/Farm/Table/Columns/Deposit.tsx
@@ -2,7 +2,7 @@ import classNames from 'classnames'
 import { useCallback } from 'react'
 
 import ActionButton from 'components/Button/ActionButton'
-import { Enter } from 'components/Icons'
+import { Circle, Enter, TrashBin, Wallet } from 'components/Icons'
 import Loading from 'components/Loading'
 import Text from 'components/Text'
 import { LocalStorageKeys } from 'constants/localStorageKeys'
@@ -91,18 +91,18 @@ export default function Deposit(props: Props) {
 
 const INFO_ITEMS = [
   {
-    icon: <Enter width={16} height={16} />,
+    icon: <Circle />,
     title: 'One account, one position',
     description:
       'A minted HLS account can only have a single position tied to it, in order to limit risk.',
   },
   {
-    icon: <Enter />,
+    icon: <Wallet />,
     title: 'Funded from your wallet',
     description: 'To fund your HLS position, funds will have to come directly from your wallet.',
   },
   {
-    icon: <Enter />,
+    icon: <TrashBin />,
     title: 'Accounts are reusable',
     description:
       'If you exited a position from a minted account, this account can be reused for a new position.',
diff --git a/src/components/HLS/Staking/Table/Columns/Manage.tsx b/src/components/HLS/Staking/Table/Columns/Manage.tsx
index 35a55187..ca4c3c85 100644
--- a/src/components/HLS/Staking/Table/Columns/Manage.tsx
+++ b/src/components/HLS/Staking/Table/Columns/Manage.tsx
@@ -1,32 +1,68 @@
-import React from 'react'
+import React, { useCallback, useMemo } from 'react'
 
 import DropDownButton from 'components/Button/DropDownButton'
-import { ArrowDownLine, HandCoins, Plus } from 'components/Icons'
+import { ArrowDownLine, Cross, HandCoins, Plus, Scale } from 'components/Icons'
+import useCloseHlsStakingPosition from 'hooks/HLS/useClosePositionActions'
+import useStore from 'store'
 
 export const MANAGE_META = { id: 'manage' }
 
-const ITEMS: DropDownItem[] = [
-  {
-    icon: <Plus width={16} />,
-    text: 'Deposit more',
-    onClick: () => {},
-  },
-  {
-    icon: <HandCoins />,
-    text: 'Repay',
-    onClick: () => {},
-  },
-  {
-    icon: <ArrowDownLine />,
-    text: 'Withdraw',
-    onClick: () => {},
-  },
-]
-
 interface Props {
   account: HLSAccountWithStrategy
 }
 
 export default function Manage(props: Props) {
+  const openModal = useCallback(
+    (action: HlsStakingManageAction) =>
+      useStore.setState({
+        hlsManageModal: {
+          accountId: props.account.id,
+          staking: { strategy: props.account.strategy, action },
+        },
+      }),
+    [props.account.id, props.account.strategy],
+  )
+
+  const actions = useCloseHlsStakingPosition({ account: props.account })
+
+  const closeHlsStakingPosition = useStore((s) => s.closeHlsStakingPosition)
+
+  const hasNoDebt = useMemo(() => props.account.debts.length === 0, [props.account.debts.length])
+
+  const ITEMS: DropDownItem[] = useMemo(
+    () => [
+      {
+        icon: <Scale width={16} />,
+        text: 'Change leverage',
+        onClick: () => openModal('leverage'),
+      },
+      {
+        icon: <Plus width={16} />,
+        text: 'Deposit more',
+        onClick: () => openModal('deposit'),
+      },
+      ...(hasNoDebt
+        ? []
+        : [
+            {
+              icon: <HandCoins width={16} />,
+              text: 'Repay',
+              onClick: () => openModal('repay'),
+            },
+          ]),
+      {
+        icon: <ArrowDownLine width={16} />,
+        text: 'Withdraw',
+        onClick: () => openModal('withdraw'),
+      },
+      {
+        icon: <Cross width={14} />,
+        text: 'Close Position',
+        onClick: () => closeHlsStakingPosition({ accountId: props.account.id, actions }),
+      },
+    ],
+    [actions, closeHlsStakingPosition, openModal, props.account.id],
+  )
+
   return <DropDownButton items={ITEMS} text='Manage' color='tertiary' />
 }
diff --git a/src/components/Icons/Circle.svg b/src/components/Icons/Circle.svg
new file mode 100644
index 00000000..fcbf46c3
--- /dev/null
+++ b/src/components/Icons/Circle.svg
@@ -0,0 +1,10 @@
+<svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <g clip-path="url(#clip0_5007_284)">
+        <path d="M8.00016 14.6654C11.6821 14.6654 14.6668 11.6806 14.6668 7.9987C14.6668 4.3168 11.6821 1.33203 8.00016 1.33203C4.31826 1.33203 1.3335 4.3168 1.3335 7.9987C1.3335 11.6806 4.31826 14.6654 8.00016 14.6654Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+    </g>
+    <defs>
+        <clipPath id="clip0_5007_284">
+            <rect width="16" height="16" fill="currentColor"/>
+        </clipPath>
+    </defs>
+</svg>
diff --git a/src/components/Icons/Scale.svg b/src/components/Icons/Scale.svg
new file mode 100644
index 00000000..87e7b220
--- /dev/null
+++ b/src/components/Icons/Scale.svg
@@ -0,0 +1,5 @@
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="scales-02">
+<path id="Icon" d="M2.50047 13H8.50047M15.5005 13H21.5005M12.0005 7V21M12.0005 7C13.3812 7 14.5005 5.88071 14.5005 4.5M12.0005 7C10.6198 7 9.50047 5.88071 9.50047 4.5M4.00047 21L20.0005 21M4.00047 4.50001L9.50047 4.5M9.50047 4.5C9.50047 3.11929 10.6198 2 12.0005 2C13.3812 2 14.5005 3.11929 14.5005 4.5M14.5005 4.5L20.0005 4.5M8.88091 14.3364C8.48022 15.8706 7.11858 17 5.50047 17C3.88237 17 2.52073 15.8706 2.12004 14.3364C2.0873 14.211 2.07093 14.1483 2.06935 13.8979C2.06838 13.7443 2.12544 13.3904 2.17459 13.2449C2.25478 13.0076 2.34158 12.8737 2.51519 12.6059L5.50047 8L8.48576 12.6059C8.65937 12.8737 8.74617 13.0076 8.82636 13.2449C8.87551 13.3904 8.93257 13.7443 8.9316 13.8979C8.93002 14.1483 8.91365 14.211 8.88091 14.3364ZM21.8809 14.3364C21.4802 15.8706 20.1186 17 18.5005 17C16.8824 17 15.5207 15.8706 15.12 14.3364C15.0873 14.211 15.0709 14.1483 15.0693 13.8979C15.0684 13.7443 15.1254 13.3904 15.1746 13.2449C15.2548 13.0076 15.3416 12.8737 15.5152 12.6059L18.5005 8L21.4858 12.6059C21.6594 12.8737 21.7462 13.0076 21.8264 13.2449C21.8755 13.3904 21.9326 13.7443 21.9316 13.8979C21.93 14.1483 21.9137 14.211 21.8809 14.3364Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+</svg>
diff --git a/src/components/Icons/index.ts b/src/components/Icons/index.ts
index 5e010b1c..4b503b77 100644
--- a/src/components/Icons/index.ts
+++ b/src/components/Icons/index.ts
@@ -14,6 +14,7 @@ export { default as ChevronDown } from 'components/Icons/ChevronDown.svg'
 export { default as ChevronLeft } from 'components/Icons/ChevronLeft.svg'
 export { default as ChevronRight } from 'components/Icons/ChevronRight.svg'
 export { default as ChevronUp } from 'components/Icons/ChevronUp.svg'
+export { default as Circle } from 'components/Icons/Circle.svg'
 export { default as Compass } from 'components/Icons/Compass.svg'
 export { default as Copy } from 'components/Icons/Copy.svg'
 export { default as Cross } from 'components/Icons/Cross.svg'
@@ -43,6 +44,7 @@ export { default as PlusCircled } from 'components/Icons/PlusCircled.svg'
 export { default as PlusSquared } from 'components/Icons/PlusSquared.svg'
 export { default as Questionmark } from 'components/Icons/Questionmark.svg'
 export { default as ReceiptCheck } from 'components/Icons/ReceiptCheck.svg'
+export { default as Scale } from 'components/Icons/Scale.svg'
 export { default as Search } from 'components/Icons/Search.svg'
 export { default as Shield } from 'components/Icons/Shield.svg'
 export { default as SortAsc } from 'components/Icons/SortAsc.svg'
diff --git a/src/components/Modal.tsx b/src/components/Modal.tsx
index d82ada7c..14175290 100644
--- a/src/components/Modal.tsx
+++ b/src/components/Modal.tsx
@@ -4,7 +4,7 @@ import { ReactNode, useEffect, useRef } from 'react'
 import EscButton from 'components/Button/EscButton'
 import Card from 'components/Card'
 
-interface Props {
+export interface ModalProps {
   header: string | ReactNode
   headerClassName?: string
   hideCloseBtn?: boolean
@@ -18,7 +18,7 @@ interface Props {
   dialogId?: string
 }
 
-export default function Modal(props: Props) {
+export default function Modal(props: ModalProps) {
   const ref: React.RefObject<HTMLDialogElement> = useRef(null)
   const modalClassName = props.modalClassName ?? 'max-w-modal'
 
diff --git a/src/components/Modals/AlertDialog/index.tsx b/src/components/Modals/AlertDialog/index.tsx
index 623eadb1..68512648 100644
--- a/src/components/Modals/AlertDialog/index.tsx
+++ b/src/components/Modals/AlertDialog/index.tsx
@@ -75,7 +75,7 @@ function AlertDialog(props: Props) {
           )}
           {checkbox && (
             <Checkbox
-              name='aleart-toggle'
+              name='hls-info-toggle'
               checked={toggle}
               onChange={handleCheckboxClick}
               text={checkbox.text}
diff --git a/src/components/Modals/HLS/CreateAccount.tsx b/src/components/Modals/HLS/Deposit/CreateAccount.tsx
similarity index 100%
rename from src/components/Modals/HLS/CreateAccount.tsx
rename to src/components/Modals/HLS/Deposit/CreateAccount.tsx
diff --git a/src/components/Modals/HLS/Leverage.tsx b/src/components/Modals/HLS/Deposit/Leverage.tsx
similarity index 91%
rename from src/components/Modals/HLS/Leverage.tsx
rename to src/components/Modals/HLS/Deposit/Leverage.tsx
index f552dca5..3c1f4f02 100644
--- a/src/components/Modals/HLS/Leverage.tsx
+++ b/src/components/Modals/HLS/Deposit/Leverage.tsx
@@ -2,7 +2,7 @@ import React from 'react'
 
 import Button from 'components/Button'
 import { ArrowRight } from 'components/Icons'
-import LeverageSummary from 'components/Modals/HLS/LeverageSummary'
+import LeverageSummary from 'components/Modals/HLS/Deposit/LeverageSummary'
 import TokenInputWithSlider from 'components/TokenInput/TokenInputWithSlider'
 
 interface Props {
diff --git a/src/components/Modals/HLS/LeverageSummary.tsx b/src/components/Modals/HLS/Deposit/LeverageSummary.tsx
similarity index 58%
rename from src/components/Modals/HLS/LeverageSummary.tsx
rename to src/components/Modals/HLS/Deposit/LeverageSummary.tsx
index 6151c227..d3686c3f 100644
--- a/src/components/Modals/HLS/LeverageSummary.tsx
+++ b/src/components/Modals/HLS/Deposit/LeverageSummary.tsx
@@ -1,7 +1,6 @@
 import React, { useMemo } from 'react'
 
-import { FormattedNumber } from 'components/FormattedNumber'
-import Text from 'components/Text'
+import SummaryItems from 'components/SummaryItems'
 import useBorrowAsset from 'hooks/useBorrowAsset'
 
 interface Props {
@@ -12,7 +11,7 @@ interface Props {
 export default function LeverageSummary(props: Props) {
   const borrowAsset = useBorrowAsset(props.asset.denom)
 
-  const items: { title: string; amount: number; options: FormatOptions }[] = useMemo(() => {
+  const items: SummaryItem[] = useMemo(() => {
     return [
       // TODO: Get APY numbers
       {
@@ -33,18 +32,5 @@ export default function LeverageSummary(props: Props) {
     ]
   }, [borrowAsset?.borrowRate, props.asset.symbol, props.positionValue])
 
-  return (
-    <div className='grid grid-cols-2 gap-2'>
-      {items.map((item) => (
-        <React.Fragment key={item.title}>
-          <Text className='text-white/60 text-xs'>{item.title}</Text>
-          <FormattedNumber
-            className='place-self-end text-xs'
-            amount={item.amount}
-            options={item.options}
-          />
-        </React.Fragment>
-      ))}
-    </div>
-  )
+  return <SummaryItems items={items} />
 }
diff --git a/src/components/Modals/HLS/ProvideCollateral.tsx b/src/components/Modals/HLS/Deposit/ProvideCollateral.tsx
similarity index 100%
rename from src/components/Modals/HLS/ProvideCollateral.tsx
rename to src/components/Modals/HLS/Deposit/ProvideCollateral.tsx
diff --git a/src/components/Modals/HLS/SelectAccount.tsx b/src/components/Modals/HLS/Deposit/SelectAccount.tsx
similarity index 100%
rename from src/components/Modals/HLS/SelectAccount.tsx
rename to src/components/Modals/HLS/Deposit/SelectAccount.tsx
diff --git a/src/components/Modals/HLS/SubTitles.tsx b/src/components/Modals/HLS/Deposit/SubTitles.tsx
similarity index 100%
rename from src/components/Modals/HLS/SubTitles.tsx
rename to src/components/Modals/HLS/Deposit/SubTitles.tsx
diff --git a/src/components/Modals/HLS/Summary/ApyBreakdown.tsx b/src/components/Modals/HLS/Deposit/Summary/ApyBreakdown.tsx
similarity index 100%
rename from src/components/Modals/HLS/Summary/ApyBreakdown.tsx
rename to src/components/Modals/HLS/Deposit/Summary/ApyBreakdown.tsx
diff --git a/src/components/Modals/HLS/Summary/AssetSummary.tsx b/src/components/Modals/HLS/Deposit/Summary/AssetSummary.tsx
similarity index 94%
rename from src/components/Modals/HLS/Summary/AssetSummary.tsx
rename to src/components/Modals/HLS/Deposit/Summary/AssetSummary.tsx
index 031b9916..db4e08e8 100644
--- a/src/components/Modals/HLS/Summary/AssetSummary.tsx
+++ b/src/components/Modals/HLS/Deposit/Summary/AssetSummary.tsx
@@ -3,7 +3,7 @@ import React from 'react'
 import AmountAndValue from 'components/AmountAndValue'
 import AssetImage from 'components/Asset/AssetImage'
 import { FormattedNumber } from 'components/FormattedNumber'
-import Container from 'components/Modals/HLS/Summary/Container'
+import Container from 'components/Modals/HLS/Deposit/Summary/Container'
 import Text from 'components/Text'
 
 interface Props {
diff --git a/src/components/Modals/HLS/Summary/Container.tsx b/src/components/Modals/HLS/Deposit/Summary/Container.tsx
similarity index 100%
rename from src/components/Modals/HLS/Summary/Container.tsx
rename to src/components/Modals/HLS/Deposit/Summary/Container.tsx
diff --git a/src/components/Modals/HLS/Summary/YourPosition.tsx b/src/components/Modals/HLS/Deposit/Summary/YourPosition.tsx
similarity index 85%
rename from src/components/Modals/HLS/Summary/YourPosition.tsx
rename to src/components/Modals/HLS/Deposit/Summary/YourPosition.tsx
index f0769ebc..dc8201fd 100644
--- a/src/components/Modals/HLS/Summary/YourPosition.tsx
+++ b/src/components/Modals/HLS/Deposit/Summary/YourPosition.tsx
@@ -3,8 +3,8 @@ import React, { useMemo } from 'react'
 import DisplayCurrency from 'components/DisplayCurrency'
 import { FormattedNumber } from 'components/FormattedNumber'
 import { InfoCircle } from 'components/Icons'
-import AprBreakdown from 'components/Modals/HLS/Summary/ApyBreakdown'
-import Container from 'components/Modals/HLS/Summary/Container'
+import AprBreakdown from 'components/Modals/HLS/Deposit/Summary/ApyBreakdown'
+import Container from 'components/Modals/HLS/Deposit/Summary/Container'
 import Text from 'components/Text'
 import { Tooltip } from 'components/Tooltip'
 import { BNCoin } from 'types/classes/BNCoin'
@@ -63,8 +63,10 @@ export default function YourPosition(props: Props) {
             type='info'
             className='items-center flex gap-2 group-hover/apytooltip:text-white text-white/60 cursor-pointer'
           >
-            <span className='mt-0.5'>Net APY</span>{' '}
-            <InfoCircle className='w-4 h-4 text-white/40  inline group-hover/apytooltip:text-white transition-all' />
+            <>
+              <span className='mt-0.5'>Net APY</span>{' '}
+              <InfoCircle className='w-4 h-4 text-white/40  inline group-hover/apytooltip:text-white transition-all' />
+            </>
           </Tooltip>
         </Text>
         <FormattedNumber
diff --git a/src/components/Modals/HLS/Summary/index.tsx b/src/components/Modals/HLS/Deposit/Summary/index.tsx
similarity index 88%
rename from src/components/Modals/HLS/Summary/index.tsx
rename to src/components/Modals/HLS/Deposit/Summary/index.tsx
index b1e1c46f..d40a2fdd 100644
--- a/src/components/Modals/HLS/Summary/index.tsx
+++ b/src/components/Modals/HLS/Deposit/Summary/index.tsx
@@ -2,8 +2,8 @@ import React from 'react'
 
 import Button from 'components/Button'
 import { ArrowRight } from 'components/Icons'
-import AssetSummary from 'components/Modals/HLS/Summary/AssetSummary'
-import YourPosition from 'components/Modals/HLS/Summary/YourPosition'
+import AssetSummary from 'components/Modals/HLS/Deposit/Summary/AssetSummary'
+import YourPosition from 'components/Modals/HLS/Deposit/Summary/YourPosition'
 import useBorrowAsset from 'hooks/useBorrowAsset'
 import { BNCoin } from 'types/classes/BNCoin'
 
diff --git a/src/components/Modals/HLS/Content/index.tsx b/src/components/Modals/HLS/Deposit/index.tsx
similarity index 87%
rename from src/components/Modals/HLS/Content/index.tsx
rename to src/components/Modals/HLS/Deposit/index.tsx
index bd960bfa..1a619753 100644
--- a/src/components/Modals/HLS/Content/index.tsx
+++ b/src/components/Modals/HLS/Deposit/index.tsx
@@ -1,9 +1,9 @@
 import React, { useMemo, useState } from 'react'
 
 import Accordion from 'components/Accordion'
-import useStakingController from 'components/Modals/HLS/Content//useStakingController'
-import useVaultController from 'components/Modals/HLS/Content//useVaultController'
-import useAccordionItems from 'components/Modals/HLS/Content/useAccordionItems'
+import useStakingController from 'components/Modals/HLS/Deposit//useStakingController'
+import useVaultController from 'components/Modals/HLS/Deposit//useVaultController'
+import useAccordionItems from 'components/Modals/HLS/Deposit/useAccordionItems'
 import { EMPTY_ACCOUNT_HLS } from 'constants/accounts'
 import useAccounts from 'hooks/useAccounts'
 import useCurrentWalletBalance from 'hooks/useCurrentWalletBalance'
@@ -11,17 +11,14 @@ import useIsOpenArray from 'hooks/useIsOpenArray'
 import useVault from 'hooks/useVault'
 import useStore from 'store'
 import { isAccountEmpty } from 'utils/accounts'
-import { getAssetByDenom } from 'utils/assets'
 
 interface Props {
-  borrowDenom: string
-  collateralDenom: string
+  borrowAsset: Asset
+  collateralAsset: Asset
   vaultAddress: string | null
 }
 
 export default function Controller(props: Props) {
-  const collateralAsset = getAssetByDenom(props.collateralDenom)
-  const borrowAsset = getAssetByDenom(props.borrowDenom)
   const [selectedAccount, setSelectedAccount] = useState<Account>(EMPTY_ACCOUNT_HLS)
   const [isOpen, toggleIsOpen] = useIsOpenArray(4, false)
   const address = useStore((s) => s.address)
@@ -30,18 +27,16 @@ export default function Controller(props: Props) {
     () => hlsAccounts.filter((account) => isAccountEmpty(account)),
     [hlsAccounts],
   )
-  const walletCollateralAsset = useCurrentWalletBalance(props.collateralDenom)
+  const walletCollateralAsset = useCurrentWalletBalance(props.collateralAsset.denom)
   const vault = useVault(props.vaultAddress || '')
 
-  if (!collateralAsset || !borrowAsset) return null
-
   if (vault)
     return (
       <Vault
         walletCollateralAsset={walletCollateralAsset}
         vault={vault}
-        collateralAsset={collateralAsset}
-        borrowAsset={borrowAsset}
+        collateralAsset={props.collateralAsset}
+        borrowAsset={props.borrowAsset}
         emptyHlsAccounts={emptyHlsAccounts}
         hlsAccounts={hlsAccounts}
         isOpen={isOpen}
@@ -54,8 +49,8 @@ export default function Controller(props: Props) {
   return (
     <StakingContent
       walletCollateralAsset={walletCollateralAsset}
-      collateralAsset={collateralAsset}
-      borrowAsset={borrowAsset}
+      collateralAsset={props.collateralAsset}
+      borrowAsset={props.borrowAsset}
       emptyHlsAccounts={emptyHlsAccounts}
       hlsAccounts={hlsAccounts}
       isOpen={isOpen}
diff --git a/src/components/Modals/HLS/Content/useAccordionItems.tsx b/src/components/Modals/HLS/Deposit/useAccordionItems.tsx
similarity index 89%
rename from src/components/Modals/HLS/Content/useAccordionItems.tsx
rename to src/components/Modals/HLS/Deposit/useAccordionItems.tsx
index d8071fac..c93ccf77 100644
--- a/src/components/Modals/HLS/Content/useAccordionItems.tsx
+++ b/src/components/Modals/HLS/Deposit/useAccordionItems.tsx
@@ -1,11 +1,15 @@
 import React, { useMemo } from 'react'
 
-import CreateAccount from 'components/Modals/HLS/CreateAccount'
-import Leverage from 'components/Modals/HLS/Leverage'
-import ProvideCollateral from 'components/Modals/HLS/ProvideCollateral'
-import SelectAccount from 'components/Modals/HLS/SelectAccount'
-import { CollateralSubTitle, LeverageSubTitle, SubTitle } from 'components/Modals/HLS/SubTitles'
-import Summary from 'components/Modals/HLS/Summary'
+import CreateAccount from 'components/Modals/HLS/Deposit/CreateAccount'
+import Leverage from 'components/Modals/HLS/Deposit/Leverage'
+import ProvideCollateral from 'components/Modals/HLS/Deposit/ProvideCollateral'
+import SelectAccount from 'components/Modals/HLS/Deposit/SelectAccount'
+import {
+  CollateralSubTitle,
+  LeverageSubTitle,
+  SubTitle,
+} from 'components/Modals/HLS/Deposit/SubTitles'
+import Summary from 'components/Modals/HLS/Deposit/Summary'
 import { BN } from 'utils/helpers'
 
 interface Props {
diff --git a/src/components/Modals/HLS/Content/useStakingController.tsx b/src/components/Modals/HLS/Deposit/useStakingController.tsx
similarity index 63%
rename from src/components/Modals/HLS/Content/useStakingController.tsx
rename to src/components/Modals/HLS/Deposit/useStakingController.tsx
index a33f7f14..bcc0e0de 100644
--- a/src/components/Modals/HLS/Content/useStakingController.tsx
+++ b/src/components/Modals/HLS/Deposit/useStakingController.tsx
@@ -1,14 +1,10 @@
 import { useCallback, useMemo } from 'react'
 
-import { DEFAULT_SETTINGS } from 'constants/defaultSettings'
-import { LocalStorageKeys } from 'constants/localStorageKeys'
 import useDepositHlsVault from 'hooks/useDepositHlsVault'
 import useHealthComputer from 'hooks/useHealthComputer'
-import useLocalStorage from 'hooks/useLocalStorage'
 import { useUpdatedAccount } from 'hooks/useUpdatedAccount'
 import useStore from 'store'
 import { BNCoin } from 'types/classes/BNCoin'
-import { Action } from 'types/generated/mars-credit-manager/MarsCreditManager.types'
 
 interface Props {
   borrowAsset: Asset
@@ -16,9 +12,8 @@ interface Props {
   selectedAccount: Account
 }
 
-export default function useVaultController(props: Props) {
+export default function useStakingController(props: Props) {
   const { collateralAsset, borrowAsset, selectedAccount } = props
-  const [slippage] = useLocalStorage<number>(LocalStorageKeys.SLIPPAGE, DEFAULT_SETTINGS.slippage)
   const addToStakingStrategy = useStore((s) => s.addToStakingStrategy)
 
   const {
@@ -28,40 +23,14 @@ export default function useVaultController(props: Props) {
     setBorrowAmount,
     borrowAmount,
     positionValue,
+    borrowCoin,
+    depositCoin,
+    actions,
   } = useDepositHlsVault({
     collateralDenom: collateralAsset.denom,
     borrowDenom: borrowAsset.denom,
   })
 
-  const depositCoin = useMemo(
-    () => BNCoin.fromDenomAndBigNumber(collateralAsset.denom, depositAmount),
-    [collateralAsset.denom, depositAmount],
-  )
-
-  const borrowCoin = useMemo(
-    () => BNCoin.fromDenomAndBigNumber(borrowAsset.denom, borrowAmount),
-    [borrowAsset.denom, borrowAmount],
-  )
-
-  const actions: Action[] = useMemo(
-    () => [
-      {
-        deposit: depositCoin.toCoin(),
-      },
-      {
-        borrow: borrowCoin.toCoin(),
-      },
-      {
-        swap_exact_in: {
-          denom_out: collateralAsset.denom,
-          slippage: slippage.toString(),
-          coin_in: BNCoin.fromDenomAndBigNumber(borrowAsset.denom, borrowAmount).toActionCoin(),
-        },
-      },
-    ],
-    [borrowAmount, borrowAsset.denom, borrowCoin, collateralAsset.denom, depositCoin, slippage],
-  )
-
   const { updatedAccount, addDeposits } = useUpdatedAccount(selectedAccount)
   const { computeMaxBorrowAmount } = useHealthComputer(updatedAccount)
 
diff --git a/src/components/Modals/HLS/Content/useVaultController.tsx b/src/components/Modals/HLS/Deposit/useVaultController.tsx
similarity index 100%
rename from src/components/Modals/HLS/Content/useVaultController.tsx
rename to src/components/Modals/HLS/Deposit/useVaultController.tsx
diff --git a/src/components/Modals/HLS/Header.tsx b/src/components/Modals/HLS/Header.tsx
index ed15dd08..f38c5b07 100644
--- a/src/components/Modals/HLS/Header.tsx
+++ b/src/components/Modals/HLS/Header.tsx
@@ -3,23 +3,22 @@ import React from 'react'
 import DoubleLogo from 'components/DoubleLogo'
 import HLSTag from 'components/HLS/HLSTag'
 import Text from 'components/Text'
-import { getAssetByDenom } from 'utils/assets'
 
 interface Props {
-  primaryDenom: string
-  secondaryDenom: string
+  primaryAsset: Asset
+  secondaryAsset: Asset
+  action?: HlsStakingManageAction
 }
 
 export default function Header(props: Props) {
-  const primaryAsset = getAssetByDenom(props.primaryDenom)
-  const secondaryAsset = getAssetByDenom(props.secondaryDenom)
-
-  if (!primaryAsset || !secondaryAsset) return null
-
   return (
     <div className='flex items-center gap-2'>
-      <DoubleLogo primaryDenom={props.primaryDenom} secondaryDenom={props.secondaryDenom} />
-      <Text>{`${primaryAsset.symbol} - ${secondaryAsset.symbol}`}</Text>
+      <DoubleLogo
+        primaryDenom={props.primaryAsset.denom}
+        secondaryDenom={props.secondaryAsset.denom}
+      />
+      <Text>{`${props.primaryAsset.symbol}/${props.secondaryAsset.symbol}`}</Text>
+      {props.action && <Text className='capitalize'> - {props.action}</Text>}
       <HLSTag />
     </div>
   )
diff --git a/src/components/Modals/HLS/Manage/ChangeLeverage.tsx b/src/components/Modals/HLS/Manage/ChangeLeverage.tsx
new file mode 100644
index 00000000..6cb40d3f
--- /dev/null
+++ b/src/components/Modals/HLS/Manage/ChangeLeverage.tsx
@@ -0,0 +1,10 @@
+interface Props {
+  account: Account
+  action: HlsStakingManageAction
+  borrowAsset: Asset
+  collateralAsset: Asset
+}
+
+export default function Repay(props: Props) {
+  return <></>
+}
diff --git a/src/components/Modals/HLS/Manage/Deposit.tsx b/src/components/Modals/HLS/Manage/Deposit.tsx
new file mode 100644
index 00000000..33c8c445
--- /dev/null
+++ b/src/components/Modals/HLS/Manage/Deposit.tsx
@@ -0,0 +1,204 @@
+import BigNumber from 'bignumber.js'
+import React, { useCallback, useEffect, useMemo } from 'react'
+
+import Button from 'components/Button'
+import Divider from 'components/Divider'
+import SummaryItems from 'components/SummaryItems'
+import Switch from 'components/Switch'
+import Text from 'components/Text'
+import TokenInputWithSlider from 'components/TokenInput/TokenInputWithSlider'
+import { BN_ZERO } from 'constants/math'
+import useDepositActions from 'hooks/HLS/useDepositActions'
+import useBorrowAsset from 'hooks/useBorrowAsset'
+import useCurrentWalletBalance from 'hooks/useCurrentWalletBalance'
+import useHealthComputer from 'hooks/useHealthComputer'
+import usePrices from 'hooks/usePrices'
+import useToggle from 'hooks/useToggle'
+import { useUpdatedAccount } from 'hooks/useUpdatedAccount'
+import useStore from 'store'
+import { BNCoin } from 'types/classes/BNCoin'
+import { calculateAccountLeverage } from 'utils/accounts'
+import { byDenom } from 'utils/array'
+import { getCoinAmount, getCoinValue } from 'utils/formatters'
+import { BN } from 'utils/helpers'
+
+interface Props {
+  account: Account
+  action: HlsStakingManageAction
+  borrowAsset: Asset
+  collateralAsset: Asset
+}
+
+export default function Deposit(props: Props) {
+  const { addedDeposits, addedDebts, updatedAccount, simulateHlsStakingDeposit } =
+    useUpdatedAccount(props.account)
+  const { computeMaxBorrowAmount } = useHealthComputer(updatedAccount)
+  const { data: prices } = usePrices()
+  const [keepLeverage, toggleKeepLeverage] = useToggle(true)
+  const collateralAssetAmountInWallet = BN(
+    useCurrentWalletBalance(props.collateralAsset.denom)?.amount || '0',
+  )
+  const addToStakingStrategy = useStore((s) => s.addToStakingStrategy)
+  const borrowRate = useBorrowAsset(props.borrowAsset.denom)?.borrowRate || 0
+
+  const currentLeverage = useMemo(
+    () => calculateAccountLeverage(props.account, prices).toNumber(),
+    [prices, props.account],
+  )
+
+  const depositCoin = useMemo(
+    () =>
+      BNCoin.fromDenomAndBigNumber(
+        props.collateralAsset.denom,
+        addedDeposits.find(byDenom(props.collateralAsset.denom))?.amount || BN_ZERO,
+      ),
+    [addedDeposits, props.collateralAsset.denom],
+  )
+
+  const borrowCoin = useMemo(
+    () =>
+      BNCoin.fromDenomAndBigNumber(
+        props.borrowAsset.denom,
+        addedDebts.find(byDenom(props.borrowAsset.denom))?.amount || BN_ZERO,
+      ),
+    [addedDebts, props.borrowAsset.denom],
+  )
+
+  const maxBorrowAmount = useMemo(
+    () => computeMaxBorrowAmount(props.collateralAsset.denom, 'deposit'),
+    [computeMaxBorrowAmount, props.collateralAsset.denom],
+  )
+
+  useEffect(() => {
+    if (borrowCoin.amount.isGreaterThan(maxBorrowAmount)) {
+      simulateHlsStakingDeposit(
+        BNCoin.fromDenomAndBigNumber(props.collateralAsset.denom, depositCoin.amount),
+        BNCoin.fromDenomAndBigNumber(props.borrowAsset.denom, maxBorrowAmount),
+      )
+    }
+  }, [
+    borrowCoin.amount,
+    depositCoin.amount,
+    maxBorrowAmount,
+    props.borrowAsset.denom,
+    props.collateralAsset.denom,
+    simulateHlsStakingDeposit,
+  ])
+
+  const actions = useDepositActions({ depositCoin, borrowCoin })
+
+  const currentDebt: BigNumber = useMemo(
+    () => props.account.debts.find(byDenom(props.borrowAsset.denom)).amount || BN_ZERO,
+    [props.account.debts, props.borrowAsset.denom],
+  )
+
+  const handleDeposit = useCallback(() => {
+    useStore.setState({ hlsManageModal: null })
+    addToStakingStrategy({
+      accountId: props.account.id,
+      actions,
+      depositCoin,
+      borrowCoin,
+    })
+  }, [actions, addToStakingStrategy, borrowCoin, depositCoin, props.account.id])
+
+  const handleOnChange = useCallback(
+    (amount: BigNumber) => {
+      let additionalDebt = BN_ZERO
+
+      if (currentLeverage > 1 && keepLeverage) {
+        const depositValue = getCoinValue(
+          BNCoin.fromDenomAndBigNumber(props.collateralAsset.denom, amount),
+          prices,
+        )
+        const borrowValue = BN(currentLeverage - 1).times(depositValue)
+        additionalDebt = getCoinAmount(props.borrowAsset.denom, borrowValue, prices)
+      }
+
+      simulateHlsStakingDeposit(
+        BNCoin.fromDenomAndBigNumber(props.collateralAsset.denom, amount),
+        BNCoin.fromDenomAndBigNumber(props.borrowAsset.denom, additionalDebt),
+      )
+    },
+    [
+      currentLeverage,
+      keepLeverage,
+      prices,
+      props.borrowAsset.denom,
+      props.collateralAsset.denom,
+      simulateHlsStakingDeposit,
+    ],
+  )
+
+  const items: SummaryItem[] = useMemo(
+    () => [
+      ...(keepLeverage
+        ? [
+            {
+              title: 'Borrow rate',
+              amount: borrowRate,
+              options: {
+                suffix: `%`,
+                minDecimals: 2,
+                maxDecimals: 2,
+              },
+            },
+            {
+              title: 'Additional Borrow Amount',
+              amount: borrowCoin.amount.toNumber(),
+              options: {
+                suffix: ` ${props.borrowAsset.symbol}`,
+                abbreviated: true,
+                decimals: props.borrowAsset.decimals,
+              },
+            },
+            {
+              title: 'New Debt Amount',
+              amount: currentDebt.plus(borrowCoin.amount).toNumber(),
+              options: {
+                suffix: ` ${props.borrowAsset.symbol}`,
+                abbreviated: true,
+                decimals: props.borrowAsset.decimals,
+              },
+            },
+          ]
+        : []),
+    ],
+    [
+      borrowCoin.amount,
+      borrowRate,
+      currentDebt,
+      keepLeverage,
+      props.borrowAsset.decimals,
+      props.borrowAsset.symbol,
+    ],
+  )
+
+  return (
+    <>
+      <div>
+        <TokenInputWithSlider
+          amount={depositCoin.amount}
+          asset={props.collateralAsset}
+          max={collateralAssetAmountInWallet}
+          onChange={handleOnChange}
+          maxText='In Wallet'
+        />
+        <Divider className='my-6' />
+        <div className='flex flex-wrap flex-1 items-center justify-between'>
+          <div>
+            <Text className='w-full mb-1'>Keep leverage</Text>
+            <Text size='xs' className='text-white/50'>
+              Automatically borrow more funds to keep leverage
+            </Text>
+          </div>
+          <Switch name='keep-leverage' checked={keepLeverage} onChange={toggleKeepLeverage} />
+        </div>
+      </div>
+      <div className='flex flex-col gap-4'>
+        <SummaryItems items={items} />
+        <Button onClick={handleDeposit} text='Deposit' disabled={depositCoin.amount.isZero()} />
+      </div>
+    </>
+  )
+}
diff --git a/src/components/Modals/HLS/Manage/Repay.tsx b/src/components/Modals/HLS/Manage/Repay.tsx
new file mode 100644
index 00000000..f7b4a57f
--- /dev/null
+++ b/src/components/Modals/HLS/Manage/Repay.tsx
@@ -0,0 +1,98 @@
+import BigNumber from 'bignumber.js'
+import { useCallback, useMemo } from 'react'
+
+import Button from 'components/Button'
+import SummaryItems from 'components/SummaryItems'
+import TokenInputWithSlider from 'components/TokenInput/TokenInputWithSlider'
+import { BN_ZERO } from 'constants/math'
+import useCurrentWalletBalance from 'hooks/useCurrentWalletBalance'
+import { useUpdatedAccount } from 'hooks/useUpdatedAccount'
+import useStore from 'store'
+import { BNCoin } from 'types/classes/BNCoin'
+import { byDenom } from 'utils/array'
+import { BN } from 'utils/helpers'
+
+interface Props {
+  account: Account
+  action: HlsStakingManageAction
+  borrowAsset: Asset
+  collateralAsset: Asset
+}
+
+export default function Repay(props: Props) {
+  const { removeDebts, removedDebts } = useUpdatedAccount(props.account)
+  const borrowAssetAmountInWallet = BN(
+    useCurrentWalletBalance(props.borrowAsset.denom)?.amount || '0',
+  )
+  const repay = useStore((s) => s.repay)
+
+  const currentDebt: BigNumber = useMemo(
+    () => props.account.debts.find(byDenom(props.borrowAsset.denom)).amount || BN_ZERO,
+    [props.account.debts, props.borrowAsset.denom],
+  )
+
+  const repayAmount: BigNumber = useMemo(
+    () => removedDebts.find(byDenom(props.borrowAsset.denom))?.amount || BN_ZERO,
+    [removedDebts, props.borrowAsset.denom],
+  )
+
+  const maxRepayAmount = useMemo(
+    () => BigNumber.min(borrowAssetAmountInWallet.toNumber(), currentDebt),
+    [borrowAssetAmountInWallet, currentDebt],
+  )
+
+  const items: SummaryItem[] = useMemo(
+    () => [
+      {
+        title: 'Total Debt Repayable',
+        amount: currentDebt.toNumber(),
+        options: {
+          suffix: ` ${props.borrowAsset.symbol}`,
+          abbreviated: true,
+          decimals: props.borrowAsset.decimals,
+        },
+      },
+      {
+        title: 'New Debt Amount',
+        amount: currentDebt.minus(repayAmount).toNumber(),
+        options: {
+          suffix: ` ${props.borrowAsset.symbol}`,
+          abbreviated: true,
+          decimals: props.borrowAsset.decimals,
+        },
+      },
+    ],
+    [currentDebt, props.borrowAsset.decimals, props.borrowAsset.symbol, repayAmount],
+  )
+
+  const handleRepay = useCallback(() => {
+    useStore.setState({ hlsManageModal: null })
+    repay({
+      accountId: props.account.id,
+      coin: BNCoin.fromDenomAndBigNumber(props.borrowAsset.denom, repayAmount),
+      fromWallet: true,
+    })
+  }, [props.account.id, props.borrowAsset.denom, repay, repayAmount])
+
+  const handleOnChange = useCallback(
+    (amount: BigNumber) =>
+      removeDebts([BNCoin.fromDenomAndBigNumber(props.borrowAsset.denom, amount)]),
+    [props.borrowAsset.denom, removeDebts],
+  )
+
+  return (
+    <>
+      <TokenInputWithSlider
+        amount={removedDebts.find(byDenom(props.borrowAsset.denom))?.amount || BN_ZERO}
+        asset={props.borrowAsset}
+        max={maxRepayAmount}
+        onChange={handleOnChange}
+        maxText='In Wallet'
+      />
+      <div className='flex flex-col gap-4'>
+        <SummaryItems items={items} />
+        <Button onClick={handleRepay} text='Repay' />
+      </div>
+    </>
+  )
+}
diff --git a/src/components/Modals/HLS/Manage/Withdraw.tsx b/src/components/Modals/HLS/Manage/Withdraw.tsx
new file mode 100644
index 00000000..6dbb0f0b
--- /dev/null
+++ b/src/components/Modals/HLS/Manage/Withdraw.tsx
@@ -0,0 +1,62 @@
+import React, { useCallback, useMemo } from 'react'
+
+import Button from 'components/Button'
+import TokenInputWithSlider from 'components/TokenInput/TokenInputWithSlider'
+import { BN_ZERO } from 'constants/math'
+import useHealthComputer from 'hooks/useHealthComputer'
+import { useUpdatedAccount } from 'hooks/useUpdatedAccount'
+import useStore from 'store'
+import { BNCoin } from 'types/classes/BNCoin'
+import { byDenom } from 'utils/array'
+
+interface Props {
+  account: Account
+  action: HlsStakingManageAction
+  borrowAsset: Asset
+  collateralAsset: Asset
+}
+
+export default function Withdraw(props: Props) {
+  const { removedDeposits, removeDeposits, updatedAccount } = useUpdatedAccount(props.account)
+  const { computeMaxWithdrawAmount } = useHealthComputer(updatedAccount)
+  const withdraw = useStore((s) => s.withdraw)
+  const handleChange = useCallback(
+    (amount: BigNumber) =>
+      removeDeposits([BNCoin.fromDenomAndBigNumber(props.collateralAsset.denom, amount)]),
+    [removeDeposits, props.collateralAsset.denom],
+  )
+
+  const removedDeposit = useMemo(
+    () => removedDeposits.find(byDenom(props.collateralAsset.denom)),
+    [props.collateralAsset.denom, removedDeposits],
+  )
+
+  const maxWithdrawAmount = useMemo(() => {
+    const currentWithdrawAmount = removedDeposit?.amount || BN_ZERO
+    const extraWithdrawAmount = computeMaxWithdrawAmount(props.collateralAsset.denom)
+    return currentWithdrawAmount.plus(extraWithdrawAmount)
+  }, [computeMaxWithdrawAmount, props.collateralAsset.denom, removedDeposit?.amount])
+
+  const onClick = useCallback(() => {
+    useStore.setState({ hlsManageModal: null })
+    withdraw({
+      accountId: props.account.id,
+      coins: [{ coin: removedDeposit }],
+      borrow: [],
+      reclaims: [],
+    })
+  }, [props.account.id, removedDeposit, withdraw])
+
+  return (
+    <>
+      <TokenInputWithSlider
+        amount={removedDeposit?.amount || BN_ZERO}
+        asset={props.collateralAsset}
+        max={maxWithdrawAmount}
+        onChange={handleChange}
+        maxText='Available'
+      />
+      <Button onClick={onClick} text='Withdraw' disabled={removedDeposit?.amount?.isZero()} />
+    </>
+  )
+}
diff --git a/src/components/Modals/HLS/Manage/index.tsx b/src/components/Modals/HLS/Manage/index.tsx
new file mode 100644
index 00000000..d7a5be43
--- /dev/null
+++ b/src/components/Modals/HLS/Manage/index.tsx
@@ -0,0 +1,74 @@
+import React, { useCallback } from 'react'
+
+import Header from 'components/Modals/HLS/Header'
+import ChangeLeverage from 'components/Modals/HLS/Manage/ChangeLeverage'
+import Deposit from 'components/Modals/HLS/Manage/Deposit'
+import Repay from 'components/Modals/HLS/Manage/Repay'
+import Withdraw from 'components/Modals/HLS/Manage/Withdraw'
+import ModalContentWithSummary from 'components/Modals/ModalContentWithSummary'
+import useAccount from 'hooks/useAccount'
+import useStore from 'store'
+import { getAssetByDenom } from 'utils/assets'
+
+export default function HlsManageModalController() {
+  const modal = useStore((s) => s.hlsManageModal)
+  const { data: account } = useAccount(modal?.accountId)
+  const collateralAsset = getAssetByDenom(modal?.staking.strategy.denoms.deposit || '')
+  const borrowAsset = getAssetByDenom(modal?.staking.strategy.denoms.borrow || '')
+
+  if (!modal || !collateralAsset || !borrowAsset || !account) return null
+
+  return (
+    <HlsModal
+      account={account}
+      action={modal.staking.action}
+      collateralAsset={collateralAsset}
+      borrowAsset={borrowAsset}
+    />
+  )
+}
+
+interface Props {
+  account: Account
+  action: HlsStakingManageAction
+  borrowAsset: Asset
+  collateralAsset: Asset
+}
+
+function HlsModal(props: Props) {
+  const updatedAccount = useStore((s) => s.updatedAccount)
+  function handleClose() {
+    useStore.setState({ hlsManageModal: null })
+  }
+
+  const ContentComponent = useCallback(() => {
+    switch (props.action) {
+      case 'deposit':
+        return <Deposit {...props} />
+      case 'withdraw':
+        return <Withdraw {...props} />
+      case 'repay':
+        return <Repay {...props} />
+      case 'leverage':
+        return <ChangeLeverage {...props} />
+      default:
+        return null
+    }
+  }, [props])
+
+  return (
+    <ModalContentWithSummary
+      account={props.account}
+      header={
+        <Header
+          action={props.action}
+          primaryAsset={props.collateralAsset}
+          secondaryAsset={props.borrowAsset}
+        />
+      }
+      onClose={handleClose}
+      content={<ContentComponent />}
+      isContentCard
+    />
+  )
+}
diff --git a/src/components/Modals/HLS/index.tsx b/src/components/Modals/HLS/index.tsx
index 1c9f663c..d249f25c 100644
--- a/src/components/Modals/HLS/index.tsx
+++ b/src/components/Modals/HLS/index.tsx
@@ -1,36 +1,42 @@
 import React from 'react'
 
 import Modal from 'components/Modal'
-import Content from 'components/Modals/HLS/Content'
+import Content from 'components/Modals/HLS/Deposit'
 import Header from 'components/Modals/HLS/Header'
 import useStore from 'store'
+import { getAssetByDenom } from 'utils/assets'
 
 export default function HlsModalController() {
   const modal = useStore((s) => s.hlsModal)
 
+  const primaryAsset = getAssetByDenom(
+    modal?.vault?.denoms.primary || modal?.strategy?.denoms.deposit || '',
+  )
+  const secondaryAsset = getAssetByDenom(
+    modal?.vault?.denoms.secondary || modal?.strategy?.denoms.borrow || '',
+  )
+
+  if (!primaryAsset || !secondaryAsset) return null
+
   if (modal?.vault)
     return (
       <HlsModal
-        collateralDenom={modal.vault.denoms.primary}
-        borrowDenom={modal.vault.denoms.secondary}
+        primaryAsset={primaryAsset}
+        secondaryAsset={secondaryAsset}
         vaultAddress={modal.vault.address}
       />
     )
   if (modal?.strategy)
     return (
-      <HlsModal
-        collateralDenom={modal.strategy.denoms.deposit}
-        borrowDenom={modal.strategy.denoms.borrow}
-        vaultAddress={null}
-      />
+      <HlsModal primaryAsset={primaryAsset} secondaryAsset={secondaryAsset} vaultAddress={null} />
     )
 
   return null
 }
 
 interface Props {
-  borrowDenom: string
-  collateralDenom: string
+  primaryAsset: Asset
+  secondaryAsset: Asset
   vaultAddress: string | null
 }
 
@@ -41,15 +47,15 @@ function HlsModal(props: Props) {
 
   return (
     <Modal
-      header={<Header primaryDenom={props.collateralDenom} secondaryDenom={props.borrowDenom} />}
+      header={<Header primaryAsset={props.primaryAsset} secondaryAsset={props.secondaryAsset} />}
       headerClassName='gradient-header pl-2 pr-2.5 py-3 border-b-white/5 border-b'
       contentClassName='flex flex-col p-6'
       modalClassName='max-w-modal-md'
       onClose={handleClose}
     >
       <Content
-        collateralDenom={props.collateralDenom}
-        borrowDenom={props.borrowDenom}
+        collateralAsset={props.primaryAsset}
+        borrowAsset={props.secondaryAsset}
         vaultAddress={props.vaultAddress}
       />
     </Modal>
diff --git a/src/components/Modals/ModalContentWithSummary.tsx b/src/components/Modals/ModalContentWithSummary.tsx
new file mode 100644
index 00000000..39fc2ec4
--- /dev/null
+++ b/src/components/Modals/ModalContentWithSummary.tsx
@@ -0,0 +1,38 @@
+import classNames from 'classnames'
+import React from 'react'
+
+import AccountSummary from 'components/Account/AccountSummary'
+import Card from 'components/Card'
+import Modal, { ModalProps } from 'components/Modal'
+import useStore from 'store'
+
+interface Props extends ModalProps {
+  account: Account
+  isContentCard?: boolean
+}
+
+export default function ModalContentWithSummary(props: Props) {
+  const updatedAccount = useStore((s) => s.updatedAccount)
+  return (
+    <Modal
+      {...props}
+      headerClassName={classNames(
+        'gradient-header pl-2 pr-2.5 py-3 border-b-white/5 border-b',
+        props.headerClassName,
+      )}
+      contentClassName={classNames('flex items-start flex-1 gap-6 p-6', props.contentClassName)}
+    >
+      {props.isContentCard ? (
+        <Card
+          className='flex flex-1 p-4 bg-white/5'
+          contentClassName='gap-6 flex flex-col justify-between h-full min-h-[380px]'
+        >
+          {props.content}
+        </Card>
+      ) : (
+        props.content
+      )}
+      <AccountSummary account={updatedAccount || props.account} />
+    </Modal>
+  )
+}
diff --git a/src/components/Modals/ModalsContainer.tsx b/src/components/Modals/ModalsContainer.tsx
index 5f03c908..01471b9d 100644
--- a/src/components/Modals/ModalsContainer.tsx
+++ b/src/components/Modals/ModalsContainer.tsx
@@ -5,6 +5,7 @@ import {
   BorrowModal,
   FundAndWithdrawModal,
   GetStartedModal,
+  HlsManageModal,
   HlsModal,
   LendAndReclaimModalController,
   SettingsModal,
@@ -30,6 +31,7 @@ export default function ModalsContainer() {
       <WalletAssets />
       <AlertDialogController />
       <HlsModal />
+      <HlsManageModal />
     </>
   )
 }
diff --git a/src/components/Modals/index.tsx b/src/components/Modals/index.tsx
index 86ee9570..e71ffa31 100644
--- a/src/components/Modals/index.tsx
+++ b/src/components/Modals/index.tsx
@@ -11,3 +11,4 @@ export { default as VaultModal } from 'components/Modals/Vault'
 export { default as WalletAssets } from 'components/Modals/WalletAssets'
 export { default as WithdrawFromVaultsModal } from 'components/Modals/WithdrawFromVaultsModal'
 export { default as HlsModal } from 'components/Modals/HLS'
+export { default as HlsManageModal } from 'components/Modals/HLS/Manage'
diff --git a/src/components/SummaryItems.tsx b/src/components/SummaryItems.tsx
new file mode 100644
index 00000000..4689875c
--- /dev/null
+++ b/src/components/SummaryItems.tsx
@@ -0,0 +1,25 @@
+import React from 'react'
+
+import { FormattedNumber } from 'components/FormattedNumber'
+import Text from 'components/Text'
+
+interface Props {
+  items: SummaryItem[]
+}
+
+export default function SummaryItems(props: Props) {
+  return (
+    <div className='grid grid-cols-2 gap-2'>
+      {props.items.map((item) => (
+        <React.Fragment key={item.title}>
+          <Text className='text-white/60 text-sm'>{item.title}</Text>
+          <FormattedNumber
+            className='place-self-end text-sm'
+            amount={item.amount}
+            options={item.options}
+          />
+        </React.Fragment>
+      ))}
+    </div>
+  )
+}
diff --git a/src/components/Tooltip/index.tsx b/src/components/Tooltip/index.tsx
index f12c9867..f230bc42 100644
--- a/src/components/Tooltip/index.tsx
+++ b/src/components/Tooltip/index.tsx
@@ -1,4 +1,4 @@
-import Tippy from '@tippyjs/react'
+import Tippy, { TippyProps } from '@tippyjs/react'
 import classNames from 'classnames'
 import { ReactNode } from 'react'
 
@@ -8,10 +8,9 @@ import { DEFAULT_SETTINGS } from 'constants/defaultSettings'
 import { LocalStorageKeys } from 'constants/localStorageKeys'
 import useLocalStorage from 'hooks/useLocalStorage'
 
-interface Props {
+interface Props extends TippyProps {
   content: ReactNode | string
   type: TooltipType
-  children?: ReactNode | string
   className?: string
   delay?: number
   interactive?: boolean
@@ -45,6 +44,7 @@ export const Tooltip = (props: Props) => {
           className={props.contentClassName}
         />
       )}
+      {...props}
     >
       {props.children ? (
         <span
diff --git a/src/components/Trade/TradeChart/OsmosisTheGraphDataFeed.ts b/src/components/Trade/TradeChart/DataFeed.ts
similarity index 55%
rename from src/components/Trade/TradeChart/OsmosisTheGraphDataFeed.ts
rename to src/components/Trade/TradeChart/DataFeed.ts
index 384c9d13..606121d7 100644
--- a/src/components/Trade/TradeChart/OsmosisTheGraphDataFeed.ts
+++ b/src/components/Trade/TradeChart/DataFeed.ts
@@ -1,6 +1,8 @@
 import { defaultSymbolInfo } from 'components/Trade/TradeChart/constants'
 import { ASSETS } from 'constants/assets'
 import { ENV } from 'constants/env'
+import { MILLISECONDS_PER_MINUTE } from 'constants/math'
+import { byDenom } from 'utils/array'
 import { getAssetByDenom, getEnabledMarketAssets } from 'utils/assets'
 import {
   Bar,
@@ -14,8 +16,19 @@ import {
   ResolveCallback,
 } from 'utils/charting_library'
 import { BN } from 'utils/helpers'
+import { devideByPotentiallyZero } from 'utils/math'
 
-interface BarQueryData {
+interface PythBarQueryData {
+  s: string
+  t: number[]
+  o: number[]
+  h: number[]
+  l: number[]
+  c: number[]
+  v: number[]
+}
+
+interface TheGraphBarQueryData {
   close: string
   high: string
   low: string
@@ -26,41 +39,40 @@ interface BarQueryData {
 
 export const PAIR_SEPARATOR = '<>'
 
-export class OsmosisTheGraphDataFeed implements IDatafeedChartApi {
-  candlesEndpoint = ENV.CANDLES_ENDPOINT
+export class DataFeed implements IDatafeedChartApi {
+  candlesEndpoint = ENV.CANDLES_ENDPOINT_PYTH
+  candlesEndpointTheGraph = ENV.CANDLES_ENDPOINT_THE_GRAPH
   debug = false
-  exchangeName = 'Osmosis'
+  enabledMarketAssetDenoms: string[] = []
+  batchSize = 1000
   baseDecimals: number = 6
   baseDenom: string = 'uosmo'
-  batchSize = 1000
-  enabledMarketAssetDenoms: string[] = []
-  pairs: { baseAsset: string; quoteAsset: string }[] = []
-  pairsWithData: string[] = []
-  intervals: { [key: string]: string } = {
+  intervalsTheGraph: { [key: string]: string } = {
     '15': '15m',
     '30': '30m',
     '60': '1h',
     '240': '4h',
     '1D': '1d',
   }
-  minutesPerInterval: { [key: string]: number } = {
-    '15': 15,
-    '30': 30,
-    '60': 60,
-    '240': 60 * 4,
-    '1D': 60 * 24,
+  millisecondsPerInterval: { [key: string]: number } = {
+    '15': MILLISECONDS_PER_MINUTE * 15,
+    '30': MILLISECONDS_PER_MINUTE * 30,
+    '60': MILLISECONDS_PER_MINUTE * 60,
+    '240': MILLISECONDS_PER_MINUTE * 240,
+    '1D': MILLISECONDS_PER_MINUTE * 1440,
   }
-
+  pairs: { baseAsset: string; quoteAsset: string }[] = []
+  pairsWithData: string[] = []
   supportedPools: string[] = []
-  supportedResolutions = ['15', '30', '60', '4h', 'D'] as ResolutionString[]
+  supportedResolutions = ['15', '30', '60', '240', 'D'] as ResolutionString[]
 
   constructor(debug = false, baseDecimals: number, baseDenom: string) {
-    if (debug) console.log('Start TheGraph charting library datafeed')
+    if (debug) console.log('Start charting library datafeed')
     this.debug = debug
     this.baseDecimals = baseDecimals
     this.baseDenom = baseDenom
     const enabledMarketAssets = getEnabledMarketAssets()
-    this.enabledMarketAssetDenoms = enabledMarketAssets.map((asset) => asset.mainnetDenom)
+    this.enabledMarketAssetDenoms = enabledMarketAssets.map((asset) => asset.denom)
     this.supportedPools = enabledMarketAssets
       .map((asset) => asset.poolId?.toString())
       .filter((poolId) => typeof poolId === 'string') as string[]
@@ -69,8 +81,8 @@ export class OsmosisTheGraphDataFeed implements IDatafeedChartApi {
   getDescription(pairName: string) {
     const denom1 = pairName.split(PAIR_SEPARATOR)[0]
     const denom2 = pairName.split(PAIR_SEPARATOR)[1]
-    const asset1 = ASSETS.find((asset) => asset.mainnetDenom === denom1)
-    const asset2 = ASSETS.find((asset) => asset.mainnetDenom === denom2)
+    const asset1 = ASSETS.find(byDenom(denom1))
+    const asset2 = ASSETS.find(byDenom(denom2))
     return `${asset1?.symbol}/${asset2?.symbol}`
   }
 
@@ -91,7 +103,7 @@ export class OsmosisTheGraphDataFeed implements IDatafeedChartApi {
         }
       }`
 
-    return fetch(this.candlesEndpoint, {
+    return fetch(this.candlesEndpointTheGraph, {
       method: 'POST',
       headers: { 'Content-Type': 'application/json' },
       body: JSON.stringify({ query }),
@@ -131,10 +143,11 @@ export class OsmosisTheGraphDataFeed implements IDatafeedChartApi {
         full_name: this.getDescription(pairName),
         description: this.getDescription(pairName),
         ticker: this.getDescription(pairName),
-        exchange: this.exchangeName,
-        listed_exchange: this.exchangeName,
+        exchange: this.getExchangeName(pairName),
+        listed_exchange: this.getExchangeName(pairName),
         supported_resolutions: this.supportedResolutions,
         base_name: [this.getDescription(pairName)],
+        pricescale: this.getPriceScale(pairName),
       } as LibrarySymbolInfo
       onResolve(info)
     })
@@ -146,11 +159,45 @@ export class OsmosisTheGraphDataFeed implements IDatafeedChartApi {
     periodParams: PeriodParams,
     onResult: HistoryCallback,
   ): Promise<void> {
-    const interval = this.intervals[resolution]
+    try {
+      let bars = [] as Bar[]
+      const pythFeedIds = this.getPythFeedIds(symbolInfo.full_name)
+      const now = new Date().getTime()
+      const to = BN(now).dividedBy(1000).integerValue().toNumber()
+      const from = BN(now)
+        .minus(this.batchSize * this.millisecondsPerInterval[resolution])
+        .dividedBy(1000)
+        .integerValue()
+        .toNumber()
+      const pythFeedId1 = pythFeedIds[0]
+      const pythFeedId2 = pythFeedIds[1]
 
+      if (pythFeedId1 && pythFeedId2) {
+        const asset1Bars = this.queryBarData(pythFeedId1, resolution, from, to)
+        const asset2Bars = this.queryBarData(pythFeedId2, resolution, from, to)
+
+        await Promise.all([asset1Bars, asset2Bars]).then(([asset1Bars, asset2Bars]) => {
+          bars = this.combineBars(asset1Bars, asset2Bars)
+          onResult(bars)
+        })
+      } else {
+        await this.getBarsFromTheGraph(symbolInfo, resolution, to).then((bars) => onResult(bars))
+      }
+    } catch (error) {
+      console.error(error)
+      return onResult([], { noData: true })
+    }
+  }
+
+  async getBarsFromTheGraph(
+    symbolInfo: LibrarySymbolInfo,
+    resolution: ResolutionString,
+    to: number,
+  ) {
     let pair1 = this.getPairName(symbolInfo.full_name)
     let pair2: string = ''
     let pair3: string = ''
+    let theGraphBars = [] as Bar[]
 
     if (!this.pairsWithData.includes(pair1)) {
       if (this.debug) console.log('Pair does not have data, need to combine with other pairs')
@@ -181,29 +228,32 @@ export class OsmosisTheGraphDataFeed implements IDatafeedChartApi {
       }
     }
 
-    const pair1Bars = this.queryBarData(
+    const pair1Bars = this.queryBarDataTheGraph(
       pair1.split(PAIR_SEPARATOR)[0],
       pair1.split(PAIR_SEPARATOR)[1],
-      interval,
+      resolution,
+      to,
     )
 
     let pair2Bars: Promise<Bar[]> | null = null
 
     if (pair2) {
-      pair2Bars = this.queryBarData(
+      pair2Bars = this.queryBarDataTheGraph(
         pair2.split(PAIR_SEPARATOR)[0],
         pair2.split(PAIR_SEPARATOR)[1],
-        interval,
+        resolution,
+        to,
       )
     }
 
     let pair3Bars: Promise<Bar[]> | null = null
 
     if (pair3) {
-      pair3Bars = this.queryBarData(
+      pair3Bars = this.queryBarDataTheGraph(
         pair3.split(PAIR_SEPARATOR)[0],
         pair3.split(PAIR_SEPARATOR)[1],
-        interval,
+        resolution,
+        to,
       )
     }
 
@@ -212,7 +262,6 @@ export class OsmosisTheGraphDataFeed implements IDatafeedChartApi {
         let bars = pair1Bars
 
         if (!bars.length) {
-          onResult([], { noData: true })
           return
         }
 
@@ -225,20 +274,55 @@ export class OsmosisTheGraphDataFeed implements IDatafeedChartApi {
 
         const filler = Array.from({ length: this.batchSize - bars.length }).map((_, index) => ({
           time:
-            (bars[0]?.time || new Date().getTime()) - index * this.minutesPerInterval[resolution],
+            (bars[0]?.time || new Date().getTime()) -
+            (index * this.millisecondsPerInterval[resolution]) / 1000,
           close: 0,
           open: 0,
           high: 0,
           low: 0,
           volume: 0,
         }))
-
-        onResult([...filler, ...bars])
+        theGraphBars = [...filler, ...bars]
       },
     )
+
+    return theGraphBars
   }
 
-  async queryBarData(quote: string, base: string, interval: string): Promise<Bar[]> {
+  async queryBarData(
+    feedSymbol: string,
+    resolution: ResolutionString,
+    from: PeriodParams['from'],
+    to: PeriodParams['to'],
+  ): Promise<Bar[]> {
+    const URI = new URL('/v1/shims/tradingview/history', this.candlesEndpoint)
+    const params = new URLSearchParams(URI.search)
+
+    params.append('to', to.toString())
+    params.append('from', from.toString())
+    params.append('resolution', resolution)
+    params.append('symbol', feedSymbol)
+    URI.search = params.toString()
+
+    return fetch(URI)
+      .then((res) => res.json())
+      .then((json) => {
+        return this.resolveBarData(json, resolution, to)
+      })
+      .catch((err) => {
+        if (this.debug) console.error(err)
+        throw err
+      })
+  }
+
+  async queryBarDataTheGraph(
+    quote: string,
+    base: string,
+    resolution: ResolutionString,
+    to: PeriodParams['to'],
+  ): Promise<Bar[]> {
+    const interval = this.intervalsTheGraph[resolution]
+
     const query = `
         {
             candles(
@@ -262,14 +346,20 @@ export class OsmosisTheGraphDataFeed implements IDatafeedChartApi {
         }
     `
 
-    return fetch(this.candlesEndpoint, {
+    return fetch(this.candlesEndpointTheGraph, {
       method: 'POST',
       headers: { 'Content-Type': 'application/json' },
       body: JSON.stringify({ query }),
     })
       .then((res) => res.json())
-      .then((json: { data?: { candles: BarQueryData[] } }) => {
-        return this.resolveBarData(json.data?.candles.reverse() || [], base, quote)
+      .then((json: { data?: { candles: TheGraphBarQueryData[] } }) => {
+        return this.resolveBarDataTheGraph(
+          json.data?.candles.reverse() || [],
+          base,
+          quote,
+          resolution,
+          to,
+        )
       })
       .catch((err) => {
         if (this.debug) console.error(err)
@@ -277,12 +367,35 @@ export class OsmosisTheGraphDataFeed implements IDatafeedChartApi {
       })
   }
 
-  resolveBarData(bars: BarQueryData[], toDenom: string, fromDenom: string) {
+  resolveBarData(data: PythBarQueryData, resolution: ResolutionString, to: number) {
+    let barData = [] as Bar[]
+
+    if (data['s'] === 'ok') {
+      barData = data['t'].map((timestamp, index) => ({
+        time: timestamp * 1000,
+        close: data['c'][index],
+        open: data['o'][index],
+        high: data['h'][index],
+        low: data['l'][index],
+      }))
+    }
+
+    return this.fillBarData(barData, resolution, to)
+  }
+
+  resolveBarDataTheGraph(
+    bars: TheGraphBarQueryData[],
+    toDenom: string,
+    fromDenom: string,
+    resolution: ResolutionString,
+    to: number,
+  ) {
+    let barData = [] as Bar[]
     const toDecimals = getAssetByDenom(toDenom)?.decimals || 6
     const fromDecimals = getAssetByDenom(fromDenom)?.decimals || 6
     const additionalDecimals = toDecimals - fromDecimals
 
-    return bars.map((bar) => ({
+    barData = bars.map((bar) => ({
       time: BN(bar.timestamp).multipliedBy(1000).toNumber(),
       close: BN(bar.close).shiftedBy(additionalDecimals).toNumber(),
       open: BN(bar.open).shiftedBy(additionalDecimals).toNumber(),
@@ -290,23 +403,40 @@ export class OsmosisTheGraphDataFeed implements IDatafeedChartApi {
       low: BN(bar.low).shiftedBy(additionalDecimals).toNumber(),
       volume: BN(bar.volume).shiftedBy(additionalDecimals).toNumber(),
     }))
+
+    return this.fillBarData(barData, resolution, to)
+  }
+
+  fillBarData(barData: Bar[], resolution: ResolutionString, to: number) {
+    if (barData.length < this.batchSize) {
+      const filler = Array.from({ length: this.batchSize - barData.length }).map((_, index) => ({
+        time: (barData[0]?.time || to) - index * this.millisecondsPerInterval[resolution],
+        close: 0,
+        open: 0,
+        high: 0,
+        low: 0,
+        volume: 0,
+      }))
+
+      barData = [...filler, ...barData]
+    }
+
+    return barData.length > this.batchSize ? barData.slice(0, this.batchSize) : barData
   }
 
   combineBars(pair1Bars: Bar[], pair2Bars: Bar[]): Bar[] {
     const bars: Bar[] = []
 
-    pair1Bars.forEach((pair1Bar) => {
-      const pair2Bar = pair2Bars.find((pair2Bar) => pair2Bar.time == pair1Bar.time)
+    pair1Bars.forEach((pair1Bar, index) => {
+      const pair2Bar = pair2Bars[index]
 
-      if (pair2Bar) {
-        bars.push({
-          time: pair1Bar.time,
-          open: pair1Bar.open * pair2Bar.open,
-          close: pair1Bar.close * pair2Bar.close,
-          high: pair1Bar.high * pair2Bar.high,
-          low: pair1Bar.low * pair2Bar.low,
-        })
-      }
+      bars.push({
+        time: pair1Bar.time,
+        open: devideByPotentiallyZero(pair1Bar.open, pair2Bar.open),
+        close: devideByPotentiallyZero(pair1Bar.close, pair2Bar.close),
+        high: devideByPotentiallyZero(pair1Bar.high, pair2Bar.high),
+        low: devideByPotentiallyZero(pair1Bar.low, pair2Bar.low),
+      })
     })
     return bars
   }
@@ -321,6 +451,32 @@ export class OsmosisTheGraphDataFeed implements IDatafeedChartApi {
     return `${asset1?.denom}${PAIR_SEPARATOR}${asset2?.denom}`
   }
 
+  getPriceScale(name: string) {
+    const denoms = name.split(PAIR_SEPARATOR)
+    const asset2 = ASSETS.find(byDenom(denoms[1]))
+    const decimalsOut = asset2?.decimals ?? 6
+    return BN(1)
+      .shiftedBy(decimalsOut > 8 ? 8 : decimalsOut)
+      .toNumber()
+  }
+
+  getExchangeName(name: string) {
+    const denoms = name.split(PAIR_SEPARATOR)
+    const pythFeedId1 = ASSETS.find(byDenom(denoms[0]))?.pythHistoryFeedId
+    const pythFeedId2 = ASSETS.find(byDenom(denoms[1]))?.pythHistoryFeedId
+    if (!pythFeedId1 || !pythFeedId2) return 'Osmosis'
+    return 'Pyth Oracle'
+  }
+
+  getPythFeedIds(name: string) {
+    if (name.includes(PAIR_SEPARATOR)) return []
+    const [symbol1, symbol2] = name.split('/')
+    const feedId1 = ASSETS.find((asset) => asset.symbol === symbol1)?.pythHistoryFeedId
+    const feedId2 = ASSETS.find((asset) => asset.symbol === symbol2)?.pythHistoryFeedId
+
+    return [feedId1, feedId2]
+  }
+
   searchSymbols(): void {
     // Don't allow to search for symbols
   }
diff --git a/src/components/Trade/TradeChart/TVChartContainer.tsx b/src/components/Trade/TradeChart/TVChartContainer.tsx
index 317a4691..50eb78e2 100644
--- a/src/components/Trade/TradeChart/TVChartContainer.tsx
+++ b/src/components/Trade/TradeChart/TVChartContainer.tsx
@@ -1,11 +1,8 @@
 import { useEffect, useMemo, useRef } from 'react'
 
 import Card from 'components/Card'
+import { DataFeed, PAIR_SEPARATOR } from 'components/Trade/TradeChart/DataFeed'
 import { disabledFeatures, enabledFeatures, overrides } from 'components/Trade/TradeChart/constants'
-import {
-  OsmosisTheGraphDataFeed,
-  PAIR_SEPARATOR,
-} from 'components/Trade/TradeChart/OsmosisTheGraphDataFeed'
 import useStore from 'store'
 import {
   ChartingLibraryWidgetOptions,
@@ -28,7 +25,7 @@ export const TVChartContainer = (props: Props) => {
   )
   const baseCurrency = useStore((s) => s.baseCurrency)
   const dataFeed = useMemo(
-    () => new OsmosisTheGraphDataFeed(false, baseCurrency.decimals, baseCurrency.denom),
+    () => new DataFeed(false, baseCurrency.decimals, baseCurrency.denom),
     [baseCurrency],
   )
 
diff --git a/src/components/Trade/TradeChart/constants.ts b/src/components/Trade/TradeChart/constants.ts
index 79632248..8b2689d4 100644
--- a/src/components/Trade/TradeChart/constants.ts
+++ b/src/components/Trade/TradeChart/constants.ts
@@ -28,7 +28,7 @@ export const overrides = {
 }
 
 export const defaultSymbolInfo: Partial<LibrarySymbolInfo> = {
-  listed_exchange: 'Osmosis',
+  listed_exchange: 'Pyth Oracle',
   type: 'AMM',
   session: '24x7',
   minmov: 1,
diff --git a/src/components/Trade/TradeModule/SwapForm/TradeSummary.tsx b/src/components/Trade/TradeModule/SwapForm/TradeSummary.tsx
index d694d4d7..c7721f56 100644
--- a/src/components/Trade/TradeModule/SwapForm/TradeSummary.tsx
+++ b/src/components/Trade/TradeModule/SwapForm/TradeSummary.tsx
@@ -3,7 +3,6 @@ import { useMemo } from 'react'
 
 import ActionButton from 'components/Button/ActionButton'
 import { FormattedNumber } from 'components/FormattedNumber'
-import useSwapRoute from 'hooks/useSwapRoute'
 import { getAssetByDenom } from 'utils/assets'
 import { formatAmountWithSymbol, formatPercent } from 'utils/formatters'
 
@@ -18,7 +17,9 @@ interface Props {
   borrowAmount: BigNumber
   estimatedFee: StdFee
   buyAction: () => void
+  route: Route[]
 }
+const infoLineClasses = 'flex flex-row justify-between flex-1 mb-1 text-xs text-white'
 
 export default function TradeSummary(props: Props) {
   const {
@@ -32,25 +33,23 @@ export default function TradeSummary(props: Props) {
     borrowAmount,
     estimatedFee,
     showProgressIndicator,
+    route,
   } = props
-  const { data: routes, isLoading: isRouteLoading } = useSwapRoute(sellAsset.denom, buyAsset.denom)
 
   const parsedRoutes = useMemo(() => {
-    if (!routes.length) return '-'
+    if (!route.length) return '-'
 
-    const routeSymbols = routes.map((r) => getAssetByDenom(r.token_out_denom)?.symbol)
+    const routeSymbols = route.map((r) => getAssetByDenom(r.token_out_denom)?.symbol)
     routeSymbols.unshift(sellAsset.symbol)
 
     return routeSymbols.join(' -> ')
-  }, [routes, sellAsset.symbol])
+  }, [route, sellAsset.symbol])
 
   const buttonText = useMemo(
-    () => (routes.length ? `Buy ${buyAsset.symbol}` : 'No route found'),
-    [buyAsset.symbol, routes],
+    () => (route.length ? `Buy ${buyAsset.symbol}` : 'No route found'),
+    [buyAsset.symbol, route],
   )
 
-  const infoLineClasses = 'flex flex-row justify-between flex-1 mb-1 text-xs text-white'
-
   return (
     <div
       className={classNames(
@@ -94,8 +93,8 @@ export default function TradeSummary(props: Props) {
         </div>
       </div>
       <ActionButton
-        disabled={routes.length === 0 || buyButtonDisabled}
-        showProgressIndicator={showProgressIndicator || isRouteLoading}
+        disabled={buyButtonDisabled}
+        showProgressIndicator={showProgressIndicator}
         text={buttonText}
         onClick={buyAction}
         size='md'
diff --git a/src/components/Trade/TradeModule/SwapForm/index.tsx b/src/components/Trade/TradeModule/SwapForm/index.tsx
index 8c00edea..67ebb1c4 100644
--- a/src/components/Trade/TradeModule/SwapForm/index.tsx
+++ b/src/components/Trade/TradeModule/SwapForm/index.tsx
@@ -20,6 +20,7 @@ import useHealthComputer from 'hooks/useHealthComputer'
 import useLocalStorage from 'hooks/useLocalStorage'
 import useMarketAssets from 'hooks/useMarketAssets'
 import useMarketBorrowings from 'hooks/useMarketBorrowings'
+import useSwapRoute from 'hooks/useSwapRoute'
 import useToggle from 'hooks/useToggle'
 import { useUpdatedAccount } from 'hooks/useUpdatedAccount'
 import useStore from 'store'
@@ -43,6 +44,7 @@ export default function SwapForm(props: Props) {
   const { computeMaxSwapAmount } = useHealthComputer(account)
   const { data: borrowAssets } = useMarketBorrowings()
   const { data: marketAssets } = useMarketAssets()
+  const { data: route, isLoading: isRouteLoading } = useSwapRoute(sellAsset.denom, buyAsset.denom)
   const isBorrowEnabled = !!marketAssets.find(byDenom(sellAsset.denom))?.borrowEnabled
   const [isMarginChecked, setMarginChecked] = useToggle(isBorrowEnabled ? useMargin : false)
   const [buyAssetAmount, setBuyAssetAmount] = useState(BN_ZERO)
@@ -265,6 +267,14 @@ export default function SwapForm(props: Props) {
     [borrowAsset?.liquidity?.amount],
   )
 
+  const isSwapDisabled = useMemo(
+    () =>
+      sellAssetAmount.isZero() ||
+      depositCapReachedCoins.length > 0 ||
+      borrowAmount.isGreaterThanOrEqualTo(availableLiquidity),
+    [sellAssetAmount, depositCapReachedCoins, borrowAmount, availableLiquidity],
+  )
+
   return (
     <>
       <Divider />
@@ -323,15 +333,12 @@ export default function SwapForm(props: Props) {
           sellAsset={sellAsset}
           borrowRate={borrowAsset?.borrowRate}
           buyAction={handleBuyClick}
-          buyButtonDisabled={
-            sellAssetAmount.isZero() ||
-            depositCapReachedCoins.length > 0 ||
-            borrowAmount.isGreaterThanOrEqualTo(availableLiquidity)
-          }
-          showProgressIndicator={isConfirming}
+          buyButtonDisabled={isSwapDisabled || route.length === 0}
+          showProgressIndicator={isConfirming || isRouteLoading}
           isMargin={isMarginChecked}
           borrowAmount={borrowAmount}
           estimatedFee={estimatedFee}
+          route={route}
         />
       </div>
     </>
diff --git a/src/constants/assets.ts b/src/constants/assets.ts
index 76b718ed..1d6a344f 100644
--- a/src/constants/assets.ts
+++ b/src/constants/assets.ts
@@ -21,6 +21,7 @@ export const ASSETS: Asset[] = [
     isDisplayCurrency: true,
     isAutoLendEnabled: true,
     pythPriceFeedId: '5867f5683c757393a0670ef0f701490950fe93fdb006d181c8265a831ac0c5c6',
+    pythHistoryFeedId: 'Crypto.OSMO/USD',
   },
   {
     symbol: 'ATOM',
@@ -42,6 +43,7 @@ export const ASSETS: Asset[] = [
     isBorrowEnabled: true,
     pythPriceFeedId: 'b00b60f88b03a6a625a8d1c048c3f66653edf217439983d037e7222c4e612819',
     poolId: 1,
+    pythHistoryFeedId: 'Crypto.ATOM/USD',
   },
   {
     symbol: 'stATOM',
@@ -76,6 +78,7 @@ export const ASSETS: Asset[] = [
     isAutoLendEnabled: true,
     isBorrowEnabled: true,
     pythPriceFeedId: 'e62df6c8b4a85fe1a67db44dc12de5db330f7ac66b72dc658afedf0f4a415b43',
+    pythHistoryFeedId: 'Crypto.BTC/USD',
     poolId: 712,
   },
   {
@@ -94,6 +97,7 @@ export const ASSETS: Asset[] = [
     isAutoLendEnabled: true,
     isBorrowEnabled: true,
     pythPriceFeedId: 'ff61491a931112ddf1bd8147cd1b641375f79f5825126d665480874634fd0ace',
+    pythHistoryFeedId: 'Crypto.ETH/USD',
     poolId: 704,
   },
   {
@@ -134,6 +138,7 @@ export const ASSETS: Asset[] = [
     isBorrowEnabled: true,
     isAutoLendEnabled: true,
     pythPriceFeedId: 'eaa020c61cc479712813461ce153894a96a6c00b21ed0cfc2798d1f9a9e9c94a',
+    pythHistoryFeedId: 'Crypto.USDC/USD',
     poolId: 678,
   },
   {
@@ -156,6 +161,7 @@ export const ASSETS: Asset[] = [
     isBorrowEnabled: true,
     isAutoLendEnabled: true,
     pythPriceFeedId: 'eaa020c61cc479712813461ce153894a96a6c00b21ed0cfc2798d1f9a9e9c94a',
+    pythHistoryFeedId: 'Crypto.USDC/USD',
     poolId: ENV.NETWORK === NETWORK.DEVNET ? 678 : 1221,
   },
   {
@@ -173,6 +179,7 @@ export const ASSETS: Asset[] = [
     isDisplayCurrency: ENV.NETWORK !== NETWORK.TESTNET,
     isAutoLendEnabled: false,
     pythPriceFeedId: '60144b1d5c9e9851732ad1d9760e3485ef80be39b984f6bf60f82b28a2b7f126',
+    pythHistoryFeedId: 'Crypto.AXL/USD',
     poolId: 812,
   },
   {
diff --git a/src/constants/env.ts b/src/constants/env.ts
index 37639d89..1949e422 100644
--- a/src/constants/env.ts
+++ b/src/constants/env.ts
@@ -8,14 +8,14 @@ interface EnvironmentVariables {
   ADDRESS_RED_BANK: string
   ADDRESS_SWAPPER: string
   ADDRESS_ZAPPER: string
-  CANDLES_ENDPOINT: string
+  CANDLES_ENDPOINT_THE_GRAPH: string
+  CANDLES_ENDPOINT_PYTH: string
   CHAIN_ID: string
   NETWORK: string
   URL_GQL: string
   URL_REST: string
   URL_RPC: string
   URL_VAULT_APR: string
-  WALLETS: string[]
   PYTH_ENDPOINT: string
   MAINNET_REST_API: string
   WALLET_CONNECT_ID: string
@@ -31,14 +31,14 @@ export const ENV: EnvironmentVariables = {
   ADDRESS_RED_BANK: process.env.NEXT_PUBLIC_RED_BANK || '',
   ADDRESS_SWAPPER: process.env.NEXT_PUBLIC_SWAPPER || '',
   ADDRESS_ZAPPER: process.env.NEXT_PUBLIC_ZAPPER || '',
-  CANDLES_ENDPOINT: process.env.NEXT_PUBLIC_CANDLES_ENDPOINT || '',
+  CANDLES_ENDPOINT_THE_GRAPH: process.env.NEXT_PUBLIC_CANDLES_ENDPOINT_THE_GRAPH || '',
+  CANDLES_ENDPOINT_PYTH: process.env.NEXT_PUBLIC_CANDLES_ENDPOINT_PYTH || '',
   CHAIN_ID: process.env.NEXT_PUBLIC_CHAIN_ID || '',
   NETWORK: process.env.NEXT_PUBLIC_NETWORK || '',
   URL_GQL: process.env.NEXT_PUBLIC_GQL || '',
   URL_REST: process.env.NEXT_PUBLIC_REST || '',
   URL_RPC: process.env.NEXT_PUBLIC_RPC || '',
   URL_VAULT_APR: process.env.NEXT_PUBLIC_VAULT_APR || '',
-  WALLETS: process.env.NEXT_PUBLIC_WALLETS?.split(',') || [],
   PYTH_ENDPOINT: process.env.NEXT_PUBLIC_PYTH_ENDPOINT || '',
   MAINNET_REST_API: process.env.NEXT_PUBLIC_MAINNET_REST || '',
   WALLET_CONNECT_ID: process.env.NEXT_PUBLIC_WALLET_CONNECT_ID || '',
diff --git a/src/constants/math.ts b/src/constants/math.ts
index 80110d2e..29b68b4b 100644
--- a/src/constants/math.ts
+++ b/src/constants/math.ts
@@ -6,3 +6,5 @@ export const BN_ONE = BN(1)
 export const MARGIN_TRADE_BUFFER = 0.9
 export const MIN_AMOUNT = 0.000001
 export const MAX_AMOUNT_DECIMALS = 6
+
+export const MILLISECONDS_PER_MINUTE = 60000
diff --git a/src/hooks/HLS/useClosePositionActions.ts b/src/hooks/HLS/useClosePositionActions.ts
new file mode 100644
index 00000000..9b1270b8
--- /dev/null
+++ b/src/hooks/HLS/useClosePositionActions.ts
@@ -0,0 +1,59 @@
+import { useMemo } from 'react'
+
+import { DEFAULT_SETTINGS } from 'constants/defaultSettings'
+import { LocalStorageKeys } from 'constants/localStorageKeys'
+import { BN_ZERO } from 'constants/math'
+import useLocalStorage from 'hooks/useLocalStorage'
+import usePrices from 'hooks/usePrices'
+import { BNCoin } from 'types/classes/BNCoin'
+import { Action } from 'types/generated/mars-credit-manager/MarsCreditManager.types'
+import { getCoinAmount, getCoinValue } from 'utils/formatters'
+
+interface Props {
+  account: HLSAccountWithStrategy
+}
+
+export default function UseClosePositionActions(props: Props): Action[] {
+  const [slippage] = useLocalStorage<number>(LocalStorageKeys.SLIPPAGE, DEFAULT_SETTINGS.slippage)
+  const { data: prices } = usePrices()
+
+  const collateralDenom = props.account.strategy.denoms.deposit
+  const borrowDenom = props.account.strategy.denoms.borrow
+
+  const debtAmount: BigNumber = useMemo(
+    () =>
+      props.account.debts.find((debt) => debt.denom === props.account.strategy.denoms.borrow)
+        ?.amount || BN_ZERO,
+    [props.account.debts, props.account.strategy.denoms.borrow],
+  )
+
+  const swapInAmount = useMemo(() => {
+    const targetValue = getCoinValue(BNCoin.fromDenomAndBigNumber(borrowDenom, debtAmount), prices)
+    return getCoinAmount(collateralDenom, targetValue, prices)
+      .times(1 + slippage)
+      .integerValue()
+  }, [slippage, borrowDenom, debtAmount, prices, collateralDenom])
+
+  return useMemo<Action[]>(
+    () => [
+      ...(debtAmount.isZero()
+        ? []
+        : [
+            {
+              swap_exact_in: {
+                coin_in: BNCoin.fromDenomAndBigNumber(collateralDenom, swapInAmount).toActionCoin(),
+                denom_out: borrowDenom,
+                slippage: slippage.toString(),
+              },
+            },
+            {
+              repay: {
+                coin: BNCoin.fromDenomAndBigNumber(borrowDenom, debtAmount).toActionCoin(),
+              },
+            },
+          ]),
+      { refund_all_coin_balances: {} },
+    ],
+    [borrowDenom, collateralDenom, debtAmount, slippage, swapInAmount],
+  )
+}
diff --git a/src/hooks/HLS/useDepositActions.ts b/src/hooks/HLS/useDepositActions.ts
new file mode 100644
index 00000000..40629b45
--- /dev/null
+++ b/src/hooks/HLS/useDepositActions.ts
@@ -0,0 +1,38 @@
+import { useMemo } from 'react'
+
+import { DEFAULT_SETTINGS } from 'constants/defaultSettings'
+import { LocalStorageKeys } from 'constants/localStorageKeys'
+import useLocalStorage from 'hooks/useLocalStorage'
+import { BNCoin } from 'types/classes/BNCoin'
+
+interface Props {
+  borrowCoin: BNCoin
+  depositCoin: BNCoin
+}
+
+export default function useDepositActions(props: Props) {
+  const [slippage] = useLocalStorage<number>(LocalStorageKeys.SLIPPAGE, DEFAULT_SETTINGS.slippage)
+
+  return useMemo(
+    () => [
+      {
+        deposit: props.depositCoin.toCoin(),
+      },
+      ...(props.borrowCoin.amount.isZero()
+        ? []
+        : [
+            {
+              borrow: props.borrowCoin.toCoin(),
+            },
+            {
+              swap_exact_in: {
+                denom_out: props.depositCoin.denom,
+                slippage: slippage.toString(),
+                coin_in: props.borrowCoin.toActionCoin(),
+              },
+            },
+          ]),
+    ],
+    [props.borrowCoin, props.depositCoin, slippage],
+  )
+}
diff --git a/src/hooks/useDepositHlsVault.ts b/src/hooks/useDepositHlsVault.ts
index e1e81c0d..aa18d513 100644
--- a/src/hooks/useDepositHlsVault.ts
+++ b/src/hooks/useDepositHlsVault.ts
@@ -1,8 +1,12 @@
 import { useMemo, useState } from 'react'
 
+import { DEFAULT_SETTINGS } from 'constants/defaultSettings'
+import { LocalStorageKeys } from 'constants/localStorageKeys'
 import { BN_ZERO } from 'constants/math'
+import useLocalStorage from 'hooks/useLocalStorage'
 import usePrices from 'hooks/usePrices'
 import { BNCoin } from 'types/classes/BNCoin'
+import { Action } from 'types/generated/mars-credit-manager/MarsCreditManager.types'
 import { getCoinValue } from 'utils/formatters'
 
 interface Props {
@@ -11,10 +15,21 @@ interface Props {
 }
 export default function useDepositHlsVault(props: Props) {
   const { data: prices } = usePrices()
+  const [slippage] = useLocalStorage<number>(LocalStorageKeys.SLIPPAGE, DEFAULT_SETTINGS.slippage)
 
   const [depositAmount, setDepositAmount] = useState<BigNumber>(BN_ZERO)
   const [borrowAmount, setBorrowAmount] = useState<BigNumber>(BN_ZERO)
 
+  const depositCoin = useMemo(
+    () => BNCoin.fromDenomAndBigNumber(props.collateralDenom, depositAmount),
+    [depositAmount, props.collateralDenom],
+  )
+
+  const borrowCoin = useMemo(
+    () => BNCoin.fromDenomAndBigNumber(props.borrowDenom, borrowAmount),
+    [borrowAmount, props.borrowDenom],
+  )
+
   const { positionValue, leverage } = useMemo(() => {
     const collateralValue = getCoinValue(
       BNCoin.fromDenomAndBigNumber(props.collateralDenom, depositAmount),
@@ -31,6 +46,32 @@ export default function useDepositHlsVault(props: Props) {
     }
   }, [borrowAmount, depositAmount, prices, props.collateralDenom, props.borrowDenom])
 
+  const actions: Action[] = useMemo(
+    () => [
+      {
+        deposit: depositCoin.toCoin(),
+      },
+      ...(borrowAmount.isZero()
+        ? []
+        : [
+            {
+              borrow: borrowCoin.toCoin(),
+            },
+            {
+              swap_exact_in: {
+                denom_out: props.collateralDenom,
+                slippage: slippage.toString(),
+                coin_in: BNCoin.fromDenomAndBigNumber(
+                  props.borrowDenom,
+                  borrowAmount,
+                ).toActionCoin(),
+              },
+            },
+          ]),
+    ],
+    [borrowAmount, borrowCoin, depositCoin, props.borrowDenom, props.collateralDenom, slippage],
+  )
+
   return {
     setDepositAmount,
     depositAmount,
@@ -38,5 +79,8 @@ export default function useDepositHlsVault(props: Props) {
     borrowAmount,
     positionValue,
     leverage,
+    depositCoin,
+    borrowCoin,
+    actions,
   }
 }
diff --git a/src/hooks/useUpdatedAccount/index.ts b/src/hooks/useUpdatedAccount/index.ts
index eb13bcf6..dcd5ebd4 100644
--- a/src/hooks/useUpdatedAccount/index.ts
+++ b/src/hooks/useUpdatedAccount/index.ts
@@ -16,6 +16,7 @@ import useStore from 'store'
 import { BNCoin } from 'types/classes/BNCoin'
 import { cloneAccount } from 'utils/accounts'
 import { byDenom } from 'utils/array'
+import { getCoinAmount, getCoinValue } from 'utils/formatters'
 import { getValueFromBNCoins } from 'utils/helpers'
 
 export interface VaultValue {
@@ -37,6 +38,7 @@ export function useUpdatedAccount(account?: Account) {
   const [addedVaultValues, addVaultValues] = useState<VaultValue[]>([])
   const [addedLends, addLends] = useState<BNCoin[]>([])
   const [removedLends, removeLends] = useState<BNCoin[]>([])
+  const [addedTrades, addTrades] = useState<BNCoin[]>([])
 
   const removeDepositAndLendsByDenom = useCallback(
     (denom: string) => {
@@ -151,6 +153,18 @@ export function useUpdatedAccount(account?: Account) {
     [account, addDebts, addDeposits, addLends, removeDeposits, removeLends],
   )
 
+  const simulateHlsStakingDeposit = useCallback(
+    (depositCoin: BNCoin, borrowCoin: BNCoin) => {
+      addDeposits([depositCoin])
+      addDebts([borrowCoin])
+      const additionalDebtValue = getCoinValue(borrowCoin, prices)
+
+      const tradeOutputAmount = getCoinAmount(depositCoin.denom, additionalDebtValue, prices)
+      addTrades([BNCoin.fromDenomAndBigNumber(depositCoin.denom, tradeOutputAmount)])
+    },
+    [prices],
+  )
+
   const simulateVaultDeposit = useCallback(
     (address: string, coins: BNCoin[], borrowCoins: BNCoin[]) => {
       if (!account) return
@@ -179,7 +193,7 @@ export function useUpdatedAccount(account?: Account) {
     if (!account) return
 
     const accountCopy = cloneAccount(account)
-    accountCopy.deposits = addCoins(addedDeposits, [...accountCopy.deposits])
+    accountCopy.deposits = addCoins([...addedDeposits, ...addedTrades], [...accountCopy.deposits])
     accountCopy.debts = addCoins(addedDebts, [...accountCopy.debts])
     accountCopy.vaults = addValueToVaults(
       addedVaultValues,
@@ -205,6 +219,7 @@ export function useUpdatedAccount(account?: Account) {
     removedLends,
     availableVaults,
     prices,
+    addedTrades,
   ])
 
   return {
@@ -225,6 +240,7 @@ export function useUpdatedAccount(account?: Account) {
     removedLends,
     simulateBorrow,
     simulateDeposits,
+    simulateHlsStakingDeposit,
     simulateLending,
     simulateRepay,
     simulateTrade,
diff --git a/src/store/slices/broadcast.ts b/src/store/slices/broadcast.ts
index 8b08faaa..28ceb415 100644
--- a/src/store/slices/broadcast.ts
+++ b/src/store/slices/broadcast.ts
@@ -232,6 +232,32 @@ export default function createBroadcastSlice(
 
       return response.then((response) => !!response.result)
     },
+    closeHlsStakingPosition: async (options: { accountId: string; actions: Action[] }) => {
+      const msg: CreditManagerExecuteMsg = {
+        update_credit_account: {
+          account_id: options.accountId,
+          actions: options.actions,
+        },
+      }
+
+      const response = get().executeMsg({
+        messages: [generateExecutionMessage(get().address, ENV.ADDRESS_CREDIT_MANAGER, msg, [])],
+      })
+
+      get().setToast({
+        response,
+        options: {
+          action: 'deposit',
+          message: `Exited HLS strategy`,
+        },
+      })
+
+      const response_1 = await response
+      return response_1.result
+        ? getSingleValueFromBroadcastResult(response_1.result, 'wasm', 'token_id')
+        : null
+    },
+
     createAccount: async (accountKind: AccountKind) => {
       const msg: CreditManagerExecuteMsg = {
         create_credit_account: accountKind,
@@ -538,8 +564,10 @@ export default function createBroadcastSlice(
       coin: BNCoin
       accountBalance?: boolean
       lend?: BNCoin
+      fromWallet?: boolean
     }) => {
       const actions: Action[] = [
+        ...(options.fromWallet ? [{ deposit: options.coin.toCoin() }] : []),
         {
           repay: {
             coin: options.coin.toActionCoin(options.accountBalance),
@@ -558,7 +586,14 @@ export default function createBroadcastSlice(
       }
 
       const response = get().executeMsg({
-        messages: [generateExecutionMessage(get().address, ENV.ADDRESS_CREDIT_MANAGER, msg, [])],
+        messages: [
+          generateExecutionMessage(
+            get().address,
+            ENV.ADDRESS_CREDIT_MANAGER,
+            msg,
+            options.fromWallet ? [options.coin.toCoin()] : [],
+          ),
+        ],
       })
 
       get().setToast({
diff --git a/src/store/slices/modal.ts b/src/store/slices/modal.ts
index cb497e37..fe373b2a 100644
--- a/src/store/slices/modal.ts
+++ b/src/store/slices/modal.ts
@@ -11,6 +11,7 @@ export default function createModalSlice(set: SetState<ModalSlice>, get: GetStat
     fundAndWithdrawModal: null,
     getStartedModal: false,
     hlsInformationModal: null,
+    hlsManageModal: null,
     lendAndReclaimModal: null,
     resetStettingsModal: false,
     settingsModal: false,
diff --git a/src/types/interfaces/asset.d.ts b/src/types/interfaces/asset.d.ts
index b0670be8..d2426d5c 100644
--- a/src/types/interfaces/asset.d.ts
+++ b/src/types/interfaces/asset.d.ts
@@ -52,6 +52,7 @@ interface Asset {
   isAutoLendEnabled?: boolean
   isBorrowEnabled?: boolean
   pythPriceFeedId?: string
+  pythHistoryFeedId?: string
   forceFetchPrice?: boolean
   testnetDenom?: string
   isStaking?: boolean
diff --git a/src/types/interfaces/components/SummaryItems.d.ts b/src/types/interfaces/components/SummaryItems.d.ts
new file mode 100644
index 00000000..fcb2837d
--- /dev/null
+++ b/src/types/interfaces/components/SummaryItems.d.ts
@@ -0,0 +1,5 @@
+interface SummaryItem {
+  amount: number
+  options: FormatOptions
+  title: string
+}
diff --git a/src/types/interfaces/components/swapForm.d.ts b/src/types/interfaces/components/swapForm.d.ts
new file mode 100644
index 00000000..a6d1e695
--- /dev/null
+++ b/src/types/interfaces/components/swapForm.d.ts
@@ -0,0 +1,4 @@
+interface Route {
+  pool_id: string
+  token_out_denom: string
+}
diff --git a/src/types/interfaces/store/broadcast.d.ts b/src/types/interfaces/store/broadcast.d.ts
index d5bb2470..fe8a29b8 100644
--- a/src/types/interfaces/store/broadcast.d.ts
+++ b/src/types/interfaces/store/broadcast.d.ts
@@ -92,6 +92,10 @@ interface BroadcastSlice {
     borrowToWallet: boolean
   }) => Promise<boolean>
   claimRewards: (options: { accountId: string }) => ExecutableTx
+  closeHlsStakingPosition: (options: {
+    accountId: string
+    actions: Action[]
+  }) => Promise<string | null>
   createAccount: (
     accountKind: import('types/generated/mars-rover-health-types/MarsRoverHealthTypes.types').AccountKind,
   ) => Promise<string | null>
@@ -113,6 +117,7 @@ interface BroadcastSlice {
     coin: BNCoin
     accountBalance?: boolean
     lend?: BNCoin
+    fromWallet?: boolean
   }) => Promise<boolean>
   setToast: (toast: ToastObject) => void
   swap: (options: {
diff --git a/src/types/interfaces/store/modals.d.ts b/src/types/interfaces/store/modals.d.ts
index 5cce91f7..ceef9fa6 100644
--- a/src/types/interfaces/store/modals.d.ts
+++ b/src/types/interfaces/store/modals.d.ts
@@ -4,6 +4,7 @@ interface ModalSlice {
   alertDialog: AlertDialogConfig | null
   assetOverlayState: OverlayState
   hlsModal: HlsModal | null
+  hlsManageModal: HlsManageModal | null
   borrowModal: BorrowModal | null
   fundAndWithdrawModal: 'fund' | 'withdraw' | null
   getStartedModal: boolean
@@ -73,3 +74,13 @@ interface HlsModal {
   strategy?: HLSStrategy
   vault?: Vault
 }
+
+interface HlsManageModal {
+  accountId: string
+  staking: {
+    strategy: HLSStrategy
+    action: HlsStakingManageAction
+  }
+}
+
+type HlsStakingManageAction = 'deposit' | 'withdraw' | 'repay' | 'leverage'
diff --git a/src/utils/math.ts b/src/utils/math.ts
new file mode 100644
index 00000000..998bec5f
--- /dev/null
+++ b/src/utils/math.ts
@@ -0,0 +1,4 @@
+export const devideByPotentiallyZero = (numerator: number, denominator: number): number => {
+  if (denominator === 0) return 0
+  return numerator / denominator
+}