diff --git a/packages/theme/styles/global.scss b/packages/theme/styles/global.scss
index ced5ef8cca..19c3dfbf21 100644
--- a/packages/theme/styles/global.scss
+++ b/packages/theme/styles/global.scss
@@ -29,6 +29,8 @@
 @import "./tables.scss";
 @import "./_text-editor.scss";
 
+@import "./love.scss";
+
 @import "./mono.scss";
 
 @font-face {
diff --git a/packages/theme/styles/love.scss b/packages/theme/styles/love.scss
new file mode 100644
index 0000000000..1a17090891
--- /dev/null
+++ b/packages/theme/styles/love.scss
@@ -0,0 +1,133 @@
+.floorGrid-room,
+.floorGrid-configureRoom {
+  position: relative;
+  display: grid;
+  place-items: center;
+
+  &__header {
+    position: absolute;
+    display: flex;
+    justify-content: space-between;
+    gap: .25rem;
+    bottom: calc(100% + .125rem);
+    left: 0;
+    right: 0;
+  }
+  &__field {
+    position: relative;
+    aspect-ratio: 1;
+    border-radius: 20%;
+  }
+  &::before {
+    position: absolute;
+    content: '';
+    left: calc(100% / var(--huly-floor-roomWidth) / 5 * -1);
+    right: calc(100% / var(--huly-floor-roomWidth) / 5 * -1);
+    background-color: var(--theme-popup-color);
+    border: 1px solid var(--theme-popup-divider);
+    border-radius: .75rem;
+  }
+}
+
+.floorGrid-room {
+  &__header {
+    align-items: center;
+    top: calc(100% / var(--huly-floor-roomHeight) / 3 * -1.6 + 0.375rem + 1px);
+
+    & > span {
+      color: var(--theme-caption-color);
+      cursor: default;
+    }
+  }
+  &__field {
+    overflow: hidden;
+    width: 100%;
+    height: 100%;
+    max-width: 90%;
+    max-height: 90%;
+    transition-property: max-width, max-height;
+    transition-duration: .15s;
+    transition-timing-function: ease-in-out;
+
+    &.hovered:hover {
+      background-color: transparent;
+
+      & > div { opacity: .35; }
+    }
+  }
+
+  &::before {
+    bottom: calc(100% / var(--huly-floor-roomHeight) / 5 * -1);
+
+    &.hovered { background-color: var(--theme-popup-hover); }
+  }
+  &:not(.preview)::before { top: calc(100% / var(--huly-floor-roomHeight) / 3 * -1.6); }
+  &.preview::before {
+    top: calc(100% / var(--huly-floor-roomHeight) / 3 * -1);
+    bottom: calc(100% / var(--huly-floor-roomHeight) / 3 * -1);
+    left: calc(100% / var(--huly-floor-roomWidth) / 3 * -1);
+    right: calc(100% / var(--huly-floor-roomWidth) / 3 * -1);
+    border-radius: .375rem;
+
+    .floorGrid-room__field { border-radius: .25rem; }
+  }
+  &:not(.disabled, .myOffice) {
+    &:hover .floorGrid-room__field { background-color: var(--theme-button-default); }
+    .floorGrid-room__field:not(.person) {
+      cursor: pointer;
+
+      &:hover {
+        max-width: 100%;
+        max-height: 100%;
+      }
+    }
+  }
+  &.disabled .floorGrid-room__header > span { color: var(--theme-trans-color); }
+}
+
+.floorGrid-configureRoom {
+  &__header {
+    top: calc(100% / var(--huly-floor-roomHeight) / 3 * -1.6 + .75rem - 1px);
+
+    & > .antiEditBox input { font-size: .8125rem; }
+  }
+  &__field {
+    width: 90%;
+    background-color: var(--theme-button-default);
+    cursor: default;
+
+    &.null { pointer-events: none; }
+  }
+
+  &::before {
+    top: calc(100% / var(--huly-floor-roomHeight) / 3 * -1.6);
+    bottom: calc(100% / var(--huly-floor-roomHeight) / 5 * -1);
+    box-shadow: var(--huly-floor-roomShadow, --theme-popup-shadow);
+  }
+
+  &.dragged {
+    position: absolute;
+    width: var(--huly-floor-roomWidth);
+    height: var(--huly-floor-roomHeight);
+    opacity: .85;
+    z-index: 1;
+  }
+  &.placed {
+    $room-bg-color: var(--theme-popup-color);
+    $room-stroke-color: var(--theme-button-default);
+    background-image: linear-gradient(
+      135deg,
+      $room-stroke-color 10%,
+      $room-bg-color 10%,
+      $room-bg-color 50%,
+      $room-stroke-color 50%,
+      $room-stroke-color 60%,
+      $room-bg-color 60%,
+      $room-bg-color 100%
+    );
+    background-size: 7px 7px;
+
+    .floorGrid-room__header,
+    .floorGrid-room__field { visibility: hidden; }
+  }
+}
diff --git a/packages/ui/src/components/PopupInstance.svelte b/packages/ui/src/components/PopupInstance.svelte
index 2502d0dacb..81ee2ccb47 100644
--- a/packages/ui/src/components/PopupInstance.svelte
+++ b/packages/ui/src/components/PopupInstance.svelte
@@ -14,6 +14,7 @@
 // limitations under the License.
 -->
 <script lang="ts">
+  import { onMount } from 'svelte'
   import { deviceOptionsStore as deviceInfo, resizeObserver, testing } from '..'
   import { fitPopupElement } from '../popups'
   import type { AnySvelteComponent, PopupAlignment, PopupOptions, PopupPositionElement, DeviceOptions } from '../types'
@@ -29,6 +30,15 @@
   export let close: () => void
   export let contentPanel: HTMLElement | undefined
 
+  const WINDOW_PADDING = 16
+
+  interface PopupParams {
+    x: number
+    y: number
+    width: number
+    height: number
+  }
+
   let modalHTML: HTMLElement
   let componentInstance: any
   let docSize: boolean = false
@@ -55,6 +65,8 @@
     direction: 'bottom'
   }
 
+  $: document.body.style.cursor = drag ? 'all-scroll' : 'default'
+
   function _update (result: any): void {
     if (onUpdate !== undefined) onUpdate(result)
   }
@@ -129,13 +141,80 @@
   }
 
   let drag: boolean = false
+  let notFit: number = 0
 
-  const dragParams: {
-    x: number
-    y: number
-  } = {
-    x: 0,
-    y: 0
+  const windowSize: { width: number, height: number } = { width: 0, height: 0 }
+  const dragParams: { offsetX: number, offsetY: number } = { offsetX: 0, offsetY: 0 }
+  let popupParams: PopupParams = { x: 0, y: 0, width: 0, height: 0 }
+
+  const updatedPopupParams = (pp: { x: number, y: number, width: number, height: number }): void => {
+    if (pp.width === 0 || pp.height === 0 || element !== 'movable') return
+    options.props.left = `${pp.x}px`
+    options.props.top = `${pp.y}px`
+    options.props.maxHeight = `${pp.height}px`
+  }
+  $: minHeight = element === 'movable' ? 10.375 * $deviceInfo.fontSize : 0
+  $: updatedPopupParams(popupParams)
+
+  function mouseDown (e: MouseEvent & { currentTarget: EventTarget & HTMLDivElement }): void {
+    if (element !== 'movable') return
+    const rect = e.currentTarget.getBoundingClientRect()
+    popupParams = { x: rect.left, y: rect.top, width: rect.width, height: rect.height }
+    dragParams.offsetX = e.clientX - rect.left
+    dragParams.offsetY = e.clientY - rect.top
+    drag = true
+    window.addEventListener('mousemove', mouseMove)
+    window.addEventListener('mouseup', mouseUp)
+  }
+
+  function mouseMove (e: MouseEvent): void {
+    if (element !== 'movable' && !drag) return
+    let newTop = e.clientY - dragParams.offsetY
+    let newLeft = e.clientX - dragParams.offsetX
+    if (newTop < WINDOW_PADDING) newTop = WINDOW_PADDING
+    if (newTop + popupParams.height > $deviceInfo.docHeight - WINDOW_PADDING) {
+      newTop = $deviceInfo.docHeight - popupParams.height - WINDOW_PADDING
+    }
+    if (newLeft < WINDOW_PADDING) newLeft = WINDOW_PADDING
+    if (newLeft + popupParams.width > $deviceInfo.docWidth - WINDOW_PADDING) {
+      newLeft = $deviceInfo.docWidth - popupParams.width - WINDOW_PADDING
+    }
+    popupParams = { ...popupParams, x: newLeft, y: newTop }
+    options.props.right = ''
+  }
+
+  function mouseUp (): void {
+    drag = false
+    window.removeEventListener('mousemove', mouseMove)
+    window.removeEventListener('mouseup', mouseUp)
+  }
+
+  function checkMovable (): void {
+    if (drag) return
+    const newParams: PopupParams = popupParams
+    if (windowSize.width < $deviceInfo.docWidth) {
+      // Increase Window Width
+      if (windowSize.width - popupParams.width - popupParams.x <= WINDOW_PADDING) {
+        newParams.x = $deviceInfo.docWidth - popupParams.width - WINDOW_PADDING
+      }
+    } else if (windowSize.width > $deviceInfo.docWidth) {
+      // Decrease Window Width
+      if (popupParams.x + popupParams.width >= windowSize.width - WINDOW_PADDING) {
+        newParams.x = $deviceInfo.docWidth - popupParams.width - WINDOW_PADDING
+      }
+    }
+    if (windowSize.height < $deviceInfo.docHeight) {
+      // Increase Window Height
+      if (windowSize.height - popupParams.height - popupParams.y <= WINDOW_PADDING) {
+        newParams.y = $deviceInfo.docHeight - popupParams.height - WINDOW_PADDING
+      }
+    } else if (windowSize.height > $deviceInfo.docHeight) {
+      // Decrease Window Height
+      if (popupParams.y + popupParams.height >= windowSize.height - WINDOW_PADDING) {
+        newParams.y = $deviceInfo.docHeight - popupParams.height - WINDOW_PADDING
+      }
+    }
+    popupParams = newParams
   }
 
   export function fitPopupInstance (): void {
@@ -146,17 +225,30 @@
 
   $: if ($deviceInfo.docWidth <= 900 && !docSize) docSize = true
   $: if ($deviceInfo.docWidth > 900 && docSize) docSize = false
+
+  onMount(() => {
+    windowSize.width = $deviceInfo.docWidth
+    windowSize.height = $deviceInfo.docHeight
+  })
 </script>
 
 <svelte:window
   on:resize={() => {
-    if (modalHTML) {
-      fitPopup(modalHTML, element, contentPanel)
+    if (modalHTML) fitPopup(modalHTML, element, contentPanel)
+    if (element === 'movable') {
+      if (popupParams.width === 0 && popupParams.height === 0) {
+        const rect = modalHTML.getBoundingClientRect()
+        popupParams = { x: rect.left, y: rect.top, width: rect.width, height: rect.height }
+      }
+      checkMovable()
     }
+    windowSize.width = $deviceInfo.docWidth
+    windowSize.height = $deviceInfo.docHeight
   }}
   on:keydown={handleKeydown}
 />
 
+<!-- svelte-ignore a11y-no-static-element-interactions -->
 <div
   class="popup {testing ? 'endShow' : showing === undefined ? 'endShow' : !showing ? 'preShow' : 'startShow'}"
   class:testing
@@ -179,30 +271,7 @@
     clientHeight = element.clientHeight
     fitPopupInstance()
   }}
-  on:mousedown={(e) => {
-    if (element === 'movable') {
-      const rect = e.currentTarget.getBoundingClientRect()
-      dragParams.x = e.clientX - rect.left
-      dragParams.y = e.clientY - rect.top
-      drag = true
-    }
-  }}
-  on:mouseup={() => {
-    drag = false
-  }}
-  on:mousemove={(e) => {
-    if (element === 'movable' && drag) {
-      const newTop = e.clientY - dragParams.y
-      const newLeft = e.clientX - dragParams.x
-      if (newTop > 0) {
-        options.props.top = `${newTop}px`
-      }
-      if (newLeft > 0) {
-        options.props.left = `${newLeft}px`
-      }
-      options.props.right = ''
-    }
-  }}
+  on:mousedown={mouseDown}
 >
   <svelte:component
     this={is}
@@ -219,8 +288,9 @@
       fullSize = !fullSize
       fitPopup(modalHTML, element, contentPanel)
     }}
-    on:changeContent={() => {
+    on:changeContent={(ev) => {
       fitPopup(modalHTML, element, contentPanel)
+      if (ev.detail?.notFit !== undefined) notFit = ev.detail.notFit
     }}
   />
 </div>
@@ -234,22 +304,6 @@
     style={`z-index: ${zIndex};`}
     on:click={handleOverlayClick}
     on:keydown|stopPropagation|preventDefault={() => {}}
-    on:mouseup={() => {
-      drag = false
-    }}
-    on:mousemove={(e) => {
-      if (element === 'movable' && drag) {
-        const newTop = e.clientY - dragParams.y
-        const newLeft = e.clientX - dragParams.x
-        if (newTop > 0) {
-          options.props.top = `${newTop}px`
-        }
-        if (newLeft > 0) {
-          options.props.left = `${newLeft}px`
-        }
-        options.props.right = ''
-      }
-    }}
   />
 {/if}