diff --git a/README.md b/README.md
index 90d2b39..939b973 100644
--- a/README.md
+++ b/README.md
@@ -43,7 +43,8 @@ Visit the [interactive playground](https://playcode.io/capture_eye_demo) for the
 | `nid` | Yes | The unique [Nid](https://docs.numbersprotocol.io/introduction/numbers-protocol/defining-web3-assets/numbers-id-nid) of the asset. <br> `<capture-eye nid="bafybeief3yriouin54tzub5otnzka6muacrsu32tl2vxnaexgffizdxxqy"></capture-eye>` |
 | `layout` | No | Decides which layout to display. Default value is `original`. Additional option includes `curated`. <br> `<capture-eye nid="..." layout="curated"></capture-eye>` |
 | `visibility` | No | Visibility behavior. Default value is `hover`, showing Eye on mouse hover. Setting it to option `always` will make the Eye always shown. This attribute is `always` and cannot be customized on mobile devices. <br> `<capture-eye nid="..." visibility="always"></capture-eye>` |
-| `color` | No | The widget color. Default value is #377dde (blue), and for mobile, the default value is #333333 (gray). <br> `<capture-eye nid="..." color="#c04240"></capture-eye>` |
+| `position` | No | The widget position. Default value is `top left`. Additional option includes `top right`, `bottom left`, and `bottom right`. <br> `<capture-eye nid="..." position="bottom right"></capture-eye>` |
+| `color` | No | The widget color. Default value is `#377dde` (blue), and for mobile, the default value is `#333333` (gray). <br> `<capture-eye nid="..." color="#c04240"></capture-eye>` |
 | `cz-title` | No | Override the copyright zone title. <br> `<capture-eye nid="..." cz-title="collected by"></capture-eye>` |
 | `eng-img` | No | Sets the image for the engagement zone banner. Recommended dimensions: `320x120 px`. Supports multiple `eng-img` and `eng-link` pairs for rotating banners. If multiple pairs are provided by using comma to seperate each URL entry, the banner will rotate every 5 seconds. Ensure that the number of `eng-img` matches the number of `eng-link` entries. Use URL encoding to replace commas with `%2C` in the URLs. <br> `<capture-eye nid="..." eng-img="https://my.image.url/image1.png, https://my.image.url/image2.png"></capture-eye>` |
 | `eng-link` | No | Sets the URL for the engagement zone banner link. Each `eng-link` should correspond to an `eng-img` for proper pairing in rotating banners, following the same comma-separated rule.  <br> `<capture-eye nid="..." eng-link="https://my.website.url1, https://my.website.url2"></capture-eye>` |
diff --git a/dev/index.html b/dev/index.html
index ef8a983..7f448dc 100644
--- a/dev/index.html
+++ b/dev/index.html
@@ -66,6 +66,7 @@
         eng-link="https://captureapp.xyz, https://defiance.media/"
         action-button-text="View docs"
         action-button-link="https://docs.captureapp.xyz"
+        position="bottom right"
       >
         <media-viewer
           src="https://ipfs-pin.numbersprotocol.io/ipfs/bafybeifksqe7orsgtfnly5j3okltqi3iyt3k2pptnlfyre62jpfzxftsju"
@@ -84,6 +85,7 @@
 
       <capture-eye
         nid="bafybeiclalewdmcdj2lwj2wtsxyacncg2vbpoorllsgkvpc3ercocqea6i"
+        position="top left"
       >
         <media-viewer
           src="https://ipfs-pin.numbersprotocol.io/ipfs/bafybeiclalewdmcdj2lwj2wtsxyacncg2vbpoorllsgkvpc3ercocqea6i"
@@ -92,6 +94,7 @@
 
       <capture-eye
         nid="bafybeidmy3oncdegri3cugy3zstnqderjokmj5f3wfqrbrswhcf47eyxau"
+        position="top right"
       >
         <img
           src="https://ipfs-pin.numbersprotocol.io/ipfs/bafybeidmy3oncdegri3cugy3zstnqderjokmj5f3wfqrbrswhcf47eyxau"
@@ -100,6 +103,7 @@
 
       <capture-eye
         nid="bafybeieq4kw5rmkwhvwgrb5psr5h4mdbnxtmqf6wxiun7jqjxsoj43zevm"
+        position="bottom left"
       >
         <img
           src="https://ipfs-pin.numbersprotocol.io/ipfs/bafybeieq4kw5rmkwhvwgrb5psr5h4mdbnxtmqf6wxiun7jqjxsoj43zevm"
@@ -108,6 +112,7 @@
 
       <capture-eye
         nid="bafybeicnparo54ctkk5tbqaz2ykteuzp4gy4aof76pjv72x5bl35qiftim"
+        position="bottom right"
       >
         <img
           src="https://ipfs-pin.numbersprotocol.io/ipfs/bafybeicnparo54ctkk5tbqaz2ykteuzp4gy4aof76pjv72x5bl35qiftim"
diff --git a/src/capture-eye-styles.ts b/src/capture-eye-styles.ts
index 984964c..e9c0040 100644
--- a/src/capture-eye-styles.ts
+++ b/src/capture-eye-styles.ts
@@ -5,22 +5,21 @@ export function getCaptureEyeStyles() {
     :host {
       display: block;
       font-family: 'Degular-Medium', Helvetica;
-      --capture-eye-container-flex: 0 1 auto;
-      --capture-eye-container-display: flex;
+      --capture-eye-container-display: inline-block;
+    }
+
+    ::slotted(*) {
+      display: block;
     }
 
     .capture-eye-container {
       position: relative;
       display: var(--capture-eye-container-display);
-      flex: var(--capture-eye-container-flex);
+      vertical-align: bottom;
     }
 
     .capture-eye-button {
       position: absolute;
-      top: 0;
-      left: 0;
-      margin-top: 5px;
-      margin-left: 5px;
       justify-content: center;
       align-items: center;
       z-index: 100;
@@ -31,6 +30,22 @@ export function getCaptureEyeStyles() {
       opacity: 0.4;
       display: none; /* Hidden by default */
     }
+    .capture-eye-button.position-top {
+      top: 0;
+      margin-top: 5px;
+    }
+    .capture-eye-button.position-bottom {
+      bottom: 0;
+      margin-bottom: 5px;
+    }
+    .capture-eye-button.position-left {
+      left: 0;
+      margin-left: 5px;
+    }
+    .capture-eye-button.position-right {
+      right: 0;
+      margin-right: 5px;
+    }
     .capture-eye-button:hover {
       opacity: 1;
     }
@@ -53,9 +68,7 @@ export function getCaptureEyeStyles() {
         text-overflow: ellipsis;
         content: 'Click me!';
         position: absolute;
-        left: 220%;
         /* Adjust as needed */
-        transform: translateX(-50%);
         padding: 5px 10px;
         background-color: #fff;
         /* Background color of the popup */
@@ -70,6 +83,14 @@ export function getCaptureEyeStyles() {
         /* Ensure it doesn't interfere with other interactions */
         font-family: 'Degular-Medium', Helvetica;
       }
+      .capture-eye-button.position-left:hover::before {
+        left: 220%;
+        transform: translateX(-50%);
+      }
+      .capture-eye-button.position-right:hover::before {
+        right: 220%;
+        transform: translateX(50%);
+      }
     }
 
     .capture-eye-no-scroll {
diff --git a/src/capture-eye.ts b/src/capture-eye.ts
index def3ecf..729e1a2 100644
--- a/src/capture-eye.ts
+++ b/src/capture-eye.ts
@@ -32,6 +32,12 @@ export class CaptureEye extends LitElement {
   @property({ type: String })
   visibility = Constant.visibility.hover;
 
+  /**
+   * Set position. Default is top left. Options: top left, top right, bottom left, bottom right
+   */
+  @property({ type: String })
+  position = '';
+
   /**
    * Set color: default is #377dde, and for mobile, the default is #333333.
    */
@@ -105,15 +111,19 @@ export class CaptureEye extends LitElement {
     const color = this.color
       ? this.color
       : mobile
-        ? Constant.color.mobileEye
-        : Constant.color.defaultEye;
+      ? Constant.color.mobileEye
+      : Constant.color.defaultEye;
     const size = mobile ? 24 : 32;
+    const positions = this.position.split(' ');
     return html`
       <div
         class="capture-eye-button ${this.visibility ===
           Constant.visibility.always || mobile
           ? 'full-visibility'
-          : ''}"
+          : ''}
+          ${positions.includes('bottom') ? 'position-bottom' : 'position-top'}
+          ${positions.includes('right') ? 'position-right' : 'position-left'}
+          "
         @click=${this.openEye}
       >
         ${this.generateCaptureEyeSvg(color, size)}
@@ -157,6 +167,7 @@ export class CaptureEye extends LitElement {
       position: {
         top: buttonRect.top + window.scrollY,
         left: buttonRect.left + window.scrollX,
+        name: this.position,
       },
     };
     modalManager.updateModal(modalOptions);
@@ -172,12 +183,17 @@ export class CaptureEye extends LitElement {
   }
 
   private generateCaptureEyeSvg(
-    color: string, size: number
+    color: string,
+    size: number
   ): HTMLTemplateResult {
     return html`
       <svg
-        style="--eye-color: ${color};" width="${size}" height="${size}"
-        viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"
+        style="--eye-color: ${color};"
+        width="${size}"
+        height="${size}"
+        viewBox="0 0 24 24"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
       >
         <g clip-path="url(#clip0_640_264)">
           <path
@@ -248,7 +264,7 @@ export class CaptureEye extends LitElement {
         </g>
         <defs>
           <clipPath id="clip0_640_264">
-            <rect width="24" height="24" fill="white"/>
+            <rect width="24" height="24" fill="white" />
           </clipPath>
         </defs>
       </svg>
diff --git a/src/constant.ts b/src/constant.ts
index 2786de4..95124cb 100644
--- a/src/constant.ts
+++ b/src/constant.ts
@@ -29,6 +29,7 @@ interface ConstantType {
   layout: Layout;
   visibility: Visibility;
   color: Color;
+  position: Position;
 }
 
 interface Layout {
@@ -46,6 +47,13 @@ interface Color {
   mobileEye: string;
 }
 
+interface Position {
+  topLeft: string;
+  topRight: string;
+  bottomLeft: string;
+  bottomRight: string;
+}
+
 const numbersCdnUrl = 'https://static-cdn.numbersprotocol.io';
 
 export const Constant: ConstantType = {
@@ -83,5 +91,11 @@ export const Constant: ConstantType = {
   color: {
     defaultEye: '#377dde',
     mobileEye: '#333333',
-  }
+  },
+  position: {
+    topLeft: 'top left',
+    topRight: 'top right',
+    bottomLeft: 'bottom left',
+    bottomRight: 'bottom right',
+  },
 };
diff --git a/src/media-viewer/media-viewer-styles.ts b/src/media-viewer/media-viewer-styles.ts
index e50ff48..6128cee 100644
--- a/src/media-viewer/media-viewer-styles.ts
+++ b/src/media-viewer/media-viewer-styles.ts
@@ -9,6 +9,7 @@ export function getMediaViewerStyles() {
     video {
       width: var(--media-viewer-width, 100%);
       height: var(--media-viewer-height, auto);
+      vertical-align: bottom;
     }
     .unsupported {
       color: red;
diff --git a/src/modal/modal-styles.ts b/src/modal/modal-styles.ts
index 17e8c5d..c17b9f8 100644
--- a/src/modal/modal-styles.ts
+++ b/src/modal/modal-styles.ts
@@ -32,7 +32,6 @@ export function getModalStyles() {
       align-items: flex-start;
       opacity: 0;
       transform: scale(0.5);
-      transform-origin: top left;
       transition: opacity 0.3s ease-in-out, transform 0.3s ease-in;
       position: absolute;
     }
@@ -60,14 +59,10 @@ export function getModalStyles() {
 
     .close-button {
       position: absolute;
-      top: -16px;
-      left: -16px;
       display: flex;
       justify-content: center;
       align-items: center;
       z-index: 10001;
-      width: 32px;
-      height: 32px;
       cursor: pointer;
       border-radius: 100vw;
       opacity: 0;
@@ -75,13 +70,6 @@ export function getModalStyles() {
       transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
     }
 
-    .close-button.mobile {
-      top: -12px;
-      left: -12px;
-      width: 24px;
-      height: 24px;
-    }
-
     .close-button-visible {
       opacity: 1;
       transform: scale(1) rotate(90deg);
diff --git a/src/modal/modal.ts b/src/modal/modal.ts
index 0ca66f3..6dacd1e 100644
--- a/src/modal/modal.ts
+++ b/src/modal/modal.ts
@@ -16,12 +16,17 @@ export function formatTxHash(txHash: string): string {
 }
 
 export function generateCaptureEyeCloseSvg(
-  color: string, size: number
+  color: string,
+  size: number
 ): HTMLTemplateResult {
   return html`
     <svg
-      style="--eye-color: ${color};" width="${size}" height="${size}"
-      viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"
+      style="--eye-color: ${color};"
+      width="${size}"
+      height="${size}"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
     >
       <path
         d="M12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12
@@ -50,7 +55,7 @@ export interface ModalOptions {
   engagementZones?: EngagementZone[];
   actionButtonText?: string;
   actionButtonLink?: string;
-  position?: { top: number; left: number };
+  position?: { top: number; left: number; name: string };
 }
 
 @customElement('capture-eye-modal')
@@ -68,6 +73,9 @@ export class CaptureEyeModal extends LitElement {
   @state() protected _engagementZoneRotationInterval = 5000;
   @state() protected _engagementZoneRotationIntervalId: number | undefined =
     undefined;
+  @state() protected _position:
+    | { top: number; left: number; name: string }
+    | undefined = undefined;
   @state() protected _actionButtonText = '';
   @state() protected _actionButtonLink = '';
   @state() protected _asset: AssetModel | undefined = undefined;
@@ -120,11 +128,7 @@ export class CaptureEyeModal extends LitElement {
     if (options.actionButtonLink)
       this._actionButtonLink = options.actionButtonLink;
     if (options.position) {
-      const remOffset = this.remToPixels(1); // Convert 1rem to pixels
-      // Update modal position styles with 1rem offset
-      this.modalElement.style.position = 'absolute';
-      this.modalElement.style.top = `${options.position.top + remOffset}px`;
-      this.modalElement.style.left = `${options.position.left + remOffset}px`;
+      this._position = options.position;
     }
   }
 
@@ -141,6 +145,7 @@ export class CaptureEyeModal extends LitElement {
     this._actionButtonLink = '';
     this._asset = undefined;
     this._assetLoaded = false;
+    this._position = undefined;
   }
 
   private updateModalVisibility() {
@@ -163,13 +168,11 @@ export class CaptureEyeModal extends LitElement {
           { once: true }
         );
       } else {
+        this.updateModelPosition(closeButton as HTMLElement);
         this.modalElement.classList.remove('modal-hidden');
         this.modalElement.classList.add('modal-visible');
         closeButton.classList.remove('close-button-hidden');
         closeButton.classList.add('close-button-visible');
-        if (isMobile()) {
-          closeButton.classList.add('mobile');
-        }
       }
     }
   }
@@ -471,12 +474,12 @@ export class CaptureEyeModal extends LitElement {
   }
 
   override render() {
-    const mobile = isMobile()
+    const mobile = isMobile();
     const color = this._color
       ? this._color
       : mobile
-        ? Constant.color.mobileEye
-        : Constant.color.defaultEye;
+      ? Constant.color.mobileEye
+      : Constant.color.defaultEye;
     const size = mobile ? 24 : 32;
     return html`
       <div
@@ -532,6 +535,53 @@ export class CaptureEyeModal extends LitElement {
       subid
     );
   }
+
+  private updateModelPosition(closeButton: HTMLElement) {
+    if (!this._position) {
+      return;
+    }
+
+    const remOffset = this.remToPixels(1); // Convert 1rem to pixels
+    const top = this._position.top + remOffset;
+    const left = this._position.left + remOffset;
+    const positions = this._position.name.split(' ');
+
+    // Update modal position styles with 1rem offset
+    // Calculate the modal position relative to the media
+    let modelTop = top;
+    let modelLeft = left;
+    if (
+      modelTop > this.modalElement.offsetHeight &&
+      (positions.includes('bottom') ||
+        modelTop + this.modalElement.offsetHeight >
+          document.documentElement.scrollHeight)
+    ) {
+      modelTop -= this.modalElement.offsetHeight;
+    }
+    if (
+      modelLeft > this.modalElement.offsetWidth &&
+      (positions.includes('right') ||
+        modelLeft + this.modalElement.offsetWidth >
+          document.documentElement.scrollWidth)
+    ) {
+      modelLeft -= this.modalElement.offsetWidth;
+    }
+
+    this.modalElement.style.top = `${modelTop}px`;
+    this.modalElement.style.left = `${modelLeft}px`;
+
+    let transform_origin = top <= modelTop ? 'top' : 'bottom';
+    transform_origin =
+      transform_origin + ' ' + (left <= modelLeft ? 'left' : 'right');
+    this.modalElement.style.transformOrigin = transform_origin;
+
+    closeButton.style.top = `${
+      top - modelTop - closeButton.offsetHeight / 2
+    }px`;
+    closeButton.style.left = `${
+      left - modelLeft - closeButton.offsetWidth / 2
+    }px`;
+  }
 }
 
 declare global {
diff --git a/src/test/modal_test.ts b/src/test/modal_test.ts
index 9eeb75a..b78aa54 100644
--- a/src/test/modal_test.ts
+++ b/src/test/modal_test.ts
@@ -1,6 +1,10 @@
 import { html } from 'lit';
 import { fixture, assert, expect } from '@open-wc/testing';
-import { CaptureEyeModal, formatTxHash, generateCaptureEyeCloseSvg } from '../modal/modal';
+import {
+  CaptureEyeModal,
+  formatTxHash,
+  generateCaptureEyeCloseSvg,
+} from '../modal/modal';
 import { AssetModel } from '../asset/asset-model';
 import interactionTracker, { TrackerEvent } from '../modal/interaction-tracker';
 import sinon from 'sinon';
@@ -75,7 +79,10 @@ suite('capture-eye-modal', () => {
             </a>
           </div>
           <div class="close-button close-button-hidden">
-            ${generateCaptureEyeCloseSvg(Constant.color.defaultEye, 32).strings.join()}
+            ${generateCaptureEyeCloseSvg(
+              Constant.color.defaultEye,
+              32
+            ).strings.join()}
           </div>
         </div>
       </div>
@@ -216,19 +223,48 @@ suite('capture-eye-modal', () => {
       <capture-eye-modal></capture-eye-modal>
     `);
 
-    const position = { top: 100, left: 200 };
+    const position = { top: 100, left: 200, name: '' };
 
     el.updateModalOptions({
       nid: '123',
       position,
     });
 
+    el.modalHidden = false;
     await el.updateComplete;
 
-    const modal = el.shadowRoot?.querySelector('.modal') as HTMLDivElement;
+    let modal = el.shadowRoot?.querySelector('.modal') as HTMLDivElement;
 
     expect(modal.style.top).to.equal('116px'); // Assuming 1rem = 16px (this may vary)
     expect(modal.style.left).to.equal('216px');
+
+    // Position is bottom right with enough space in that direction
+    el.modalHidden = true;
+    el.modalHidden = false;
+    el.updateModalOptions({
+      nid: '123',
+      position: { top: 600, left: 800, name: 'bottom right' },
+    });
+    await el.updateComplete;
+
+    modal = el.shadowRoot?.querySelector('.modal') as HTMLDivElement;
+
+    expect(modal.style.top).to.equal(`${600 + 16 - modal.offsetHeight}px`);
+    expect(modal.style.left).to.equal(`${800 + 16 - modal.offsetWidth}px`);
+
+    // Position is bottom right without enough space in that direction
+    el.modalHidden = true;
+    el.modalHidden = false;
+    el.updateModalOptions({
+      nid: '123',
+      position: { top: 100, left: 200, name: 'bottom right' },
+    });
+    await el.updateComplete;
+
+    modal = el.shadowRoot?.querySelector('.modal') as HTMLDivElement;
+
+    expect(modal.style.top).to.equal('116px');
+    expect(modal.style.left).to.equal('216px');
   });
 
   test('clears modal options correctly', async () => {
@@ -247,6 +283,7 @@ suite('capture-eye-modal', () => {
           link: 'https://example.com',
         },
       ],
+      position: { top: 100, left: 200, name: '' },
     });
 
     await el.updateComplete;
@@ -259,6 +296,7 @@ suite('capture-eye-modal', () => {
     expect(el.nid).to.equal('');
     expect(el.layout).to.equal(Constant.layout.original);
     expect((el as any)._engagementZones).to.deep.equal([]);
+    expect((el as any)._position).to.equal(undefined);
   });
 
   test('modal visibility toggle works with transition end', async () => {