diff --git a/src/GenOne.Blazor.BottomSheet/demo/BlazorHybrid/Pages/Index.razor b/src/GenOne.Blazor.BottomSheet/demo/BlazorHybrid/Pages/Index.razor
index 09aed91..0dec62a 100644
--- a/src/GenOne.Blazor.BottomSheet/demo/BlazorHybrid/Pages/Index.razor
+++ b/src/GenOne.Blazor.BottomSheet/demo/BlazorHybrid/Pages/Index.razor
@@ -9,7 +9,7 @@ Times closed: @_closedCount;
 <button @onclick="OpenSheet">Open Sheet</button>
 <button @onclick="OpenSheet2">Open Sheet 2</button>
 
-<BottomSheetBlazorJs @ref="_sheet" Sensitivity="5" Stops="new[] { 95 }" OnClosed="() => _closedCount++">
+<BottomSheetBlazorJs @ref="_sheet" Sensitivity="5" DefaultStops="[95]" OnClosed="() => _closedCount++">
     @if (isTrue)
     {
         <Counter OnClick="Test" />
@@ -20,7 +20,8 @@ Times closed: @_closedCount;
     }
 </BottomSheetBlazorJs>
 
-<BottomSheetBlazorJs @ref="_sheet2" Sensitivity="20" Stops="new[] { 5 }">
+<BottomSheetBlazorJs @ref="_sheet2" Sensitivity="20" DefaultStops="[5]">
+    <button @onclick="Callback">Offset</button>
     <div>Bottome sheet 2</div>
 </BottomSheetBlazorJs>
 
@@ -30,7 +31,7 @@ Times closed: @_closedCount;
     private BottomSheetBlazorJs? _sheet;
     private BottomSheetBlazorJs? _sheet2;
     private bool isTrue = false;
-
+    private string _offset = "0";
     private int _closedCount;
 
     public async Task OpenSheet()
@@ -38,7 +39,7 @@ Times closed: @_closedCount;
         if (_sheet is null)
             throw new ArgumentNullException();
 
-        await _sheet.Open();
+        await _sheet.Open([50]);
     }
 
     public async Task OpenSheet2()
@@ -46,11 +47,17 @@ Times closed: @_closedCount;
         if (_sheet2 is null)
             throw new ArgumentNullException();
 
-        await _sheet2.Open();
+        await _sheet2.Open([50]);
     }
 
     private void Test()
     {
         isTrue = !isTrue;
     }
+
+    private void Callback()
+    {
+        _offset = _offset == "0" ? "50px" : "0";
+        _sheet2?.AddBottomOffset(_offset);
+    }
 }
diff --git a/src/GenOne.Blazor.BottomSheet/src/Components/BottomSheetBlazorJs.razor b/src/GenOne.Blazor.BottomSheet/src/Components/BottomSheetBlazorJs.razor
index 9d3608c..40c3c11 100644
--- a/src/GenOne.Blazor.BottomSheet/src/Components/BottomSheetBlazorJs.razor
+++ b/src/GenOne.Blazor.BottomSheet/src/Components/BottomSheetBlazorJs.razor
@@ -2,11 +2,12 @@
 @using GenOne.Blazor.BottomSheet.JsInterop;
 @inject BottomSheetJsInterop Interop
 
+@implements IAsyncDisposable
 
 <div @ref="_sheetRef" class="sheet" role="dialog" aria-hidden data-bs>
     <div class="overlay" data-bs-overlay></div>
 
-    <div class="contents" data-bs-contents style="height: 0vh; width: 100%;">
+    <div class="contents" data-bs-contents>
         <main class="bottom-sheet-body @Class">
             @ChildContent
         </main>
@@ -16,6 +17,8 @@
 @code {
     private ElementReference _sheetRef;
 
+    public ElementReference Ref => _sheetRef;
+
     [Parameter]
     public EventCallback OnClosed { get; set; }
 
@@ -23,13 +26,13 @@
     public bool Passive { get; set; }
 
     [Parameter]
-    public int[] Stops
+    public int[] DefaultStops
     {
-        get => _stops;
-        set => _stops = value.Order().ToArray();
+        get => _defaultStops;
+        set => _defaultStops = value.Order().ToArray();
     }
 
-    private int[] _stops = { 95 };
+    private int[] _defaultStops = [95];
 
     [Parameter]
     public int Sensitivity { get; set; } = 15;
@@ -43,13 +46,13 @@
     [Parameter]
     public EventCallback WhenInitialized { get; set; }
 
-    private IJSObjectReference? _bottomSheetReference;
+    private BottomSheetReference? _bottomSheetReference;
 
     protected override async Task OnAfterRenderAsync(bool firstRender)
     {
         if (firstRender)
         {
-            _bottomSheetReference = await Interop.InitializeBottomSheet(_sheetRef, Stops, Passive, Sensitivity, OnClosed.InvokeAsync);
+            _bottomSheetReference = await Interop.InitializeBottomSheet(_sheetRef, Passive, Sensitivity, OnClosed.InvokeAsync);
             await WhenInitialized.InvokeAsync();
         }
     }
@@ -59,17 +62,25 @@
         StateHasChanged();
     }
 
-    public async Task Open()
+    public ValueTask Open(int[]? stops = null)
     {
         BottomSheetNotInitializedException.ThrowIf(_bottomSheetReference is null);
-
-        await Interop.OpenBottomSheet(_bottomSheetReference);
+        return _bottomSheetReference.Open(stops ?? DefaultStops);
     }
 
-    public async Task Close()
+    public ValueTask Close()
     {
         BottomSheetNotInitializedException.ThrowIf(_bottomSheetReference is null);
+        return _bottomSheetReference.Close();
+    }
 
-        await Interop.CloseBottomSheet(_bottomSheetReference);
+    public ValueTask AddBottomOffset(string offset)
+    {
+        return Interop.AddBottomOffset(_sheetRef, offset);
+    }
+
+    public ValueTask DisposeAsync()
+    {
+        return _bottomSheetReference?.DisposeAsync() ?? ValueTask.CompletedTask;
     }
 }
\ No newline at end of file
diff --git a/src/GenOne.Blazor.BottomSheet/src/JsInterop/BottomSheetJsInterop.cs b/src/GenOne.Blazor.BottomSheet/src/JsInterop/BottomSheetJsInterop.cs
index f363546..d54d350 100644
--- a/src/GenOne.Blazor.BottomSheet/src/JsInterop/BottomSheetJsInterop.cs
+++ b/src/GenOne.Blazor.BottomSheet/src/JsInterop/BottomSheetJsInterop.cs
@@ -9,23 +9,18 @@ internal class BottomSheetJsInterop(IJSRuntime jsRuntime) : BaseJsInterop(jsRunt
         private const string BottomSheetInteropName = "bottom-sheet.js";
         private const string BottomSheetInteropPath = $"{InteropConfig.BaseJsFolder}{BottomSheetInteropName}";
 
-        internal async ValueTask<IJSObjectReference> InitializeBottomSheet(ElementReference sheetElement, int[] stops, bool passive, int sensitivity, Func<Task> onClosed)
+        public async ValueTask<BottomSheetReference> InitializeBottomSheet(ElementReference sheetElement, bool passive, int sensitivity, Func<Task> onClosed)
         {
             var module = await EnsureModuleImported();
             var handler = JsHandlerFactory.AsyncCallbackHandler(onClosed);
-            return await module.InvokeAsync<IJSObjectReference>("initializeBottomSheet", sheetElement, stops, passive, sensitivity, handler);
+            var bsRef = await module.InvokeAsync<IJSObjectReference>("initializeBottomSheet", sheetElement, passive, sensitivity, handler);
+            return new BottomSheetReference(bsRef);
         }
 
-        internal async ValueTask OpenBottomSheet(IJSObjectReference bottomSheetReference)
+        public async ValueTask AddBottomOffset(ElementReference sheetElement, string offset)
         {
             var module = await EnsureModuleImported();
-            await module.InvokeVoidAsync("openBottomSheet", bottomSheetReference);
-        }
-
-        internal async ValueTask CloseBottomSheet(IJSObjectReference bottomSheetReference)
-        {
-            var module = await EnsureModuleImported();
-            await module.InvokeVoidAsync("closeBottomSheet", bottomSheetReference);
+            await module.InvokeVoidAsync("addBottomOffset", sheetElement, offset);
         }
     }
 }
diff --git a/src/GenOne.Blazor.BottomSheet/src/JsInterop/BottomSheetReference.cs b/src/GenOne.Blazor.BottomSheet/src/JsInterop/BottomSheetReference.cs
new file mode 100644
index 0000000..ace0ced
--- /dev/null
+++ b/src/GenOne.Blazor.BottomSheet/src/JsInterop/BottomSheetReference.cs
@@ -0,0 +1,15 @@
+using Microsoft.JSInterop;
+
+namespace GenOne.Blazor.BottomSheet.JsInterop;
+
+internal class BottomSheetReference(IJSObjectReference bottomSheetReference) : IAsyncDisposable
+{
+    public ValueTask Open(int[] stops) 
+        => bottomSheetReference.InvokeVoidAsync("open", stops);
+
+    public ValueTask Close() 
+        => bottomSheetReference.InvokeVoidAsync("close");
+
+    public ValueTask DisposeAsync() 
+        => bottomSheetReference.DisposeAsync();
+}
\ No newline at end of file
diff --git a/src/GenOne.Blazor.BottomSheet/src/wwwroot/_bottom-sheet.css b/src/GenOne.Blazor.BottomSheet/src/wwwroot/_bottom-sheet.css
index d10253a..9bd41d9 100644
--- a/src/GenOne.Blazor.BottomSheet/src/wwwroot/_bottom-sheet.css
+++ b/src/GenOne.Blazor.BottomSheet/src/wwwroot/_bottom-sheet.css
@@ -47,8 +47,10 @@
   overflow-y: hidden;
   max-width: 70rem;
   max-height: 100vh;
-  height: 30vh;
+  height: 0vh;
+  width: 100%;
   box-sizing: border-box;
+  position: absolute;
 }
 
 .sheet .contents[full-screen] {
diff --git a/src/GenOne.Blazor.BottomSheet/src/wwwroot/_bottom-sheet.min.css b/src/GenOne.Blazor.BottomSheet/src/wwwroot/_bottom-sheet.min.css
index 1f8845c..5dcad5c 100644
--- a/src/GenOne.Blazor.BottomSheet/src/wwwroot/_bottom-sheet.min.css
+++ b/src/GenOne.Blazor.BottomSheet/src/wwwroot/_bottom-sheet.min.css
@@ -1 +1 @@
-.sheet{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;position:fixed;top:0;left:0;right:0;bottom:0;z-index:3000;visibility:visible;}.sheet[data-bs-scroll]{overflow-y:hidden;}.sheet[aria-hidden]{pointer-events:none;}.sheet .overlay{position:absolute;top:0;left:0;right:0;bottom:0;z-index:-1;background:rgba(0,0,0,.9254901961);transition:opacity .25s;}.sheet:not([aria-hidden]) .overlay{opacity:.5;}.sheet[aria-hidden] .overlay{opacity:0;}.sheet .contents{display:flex;flex-direction:column;border-radius:1rem 1rem 0 0;background:#fff;overflow-y:hidden;max-width:70rem;max-height:100vh;height:30vh;box-sizing:border-box;}.sheet .contents[full-screen]{border-radius:0;}.sheet:not([data-bs-scroll]) .contents{transition:height .25s;user-select:none;overflow:hidden!important;}.sheet .contents.fullscreen{border-radius:0;}.sheet .controls{display:flex;}.sheet .draggable-area{position:absolute;width:100%;height:6rem;cursor:grab;}.sheet .draggable-area-wrap{position:relative;}.sheet .draggable-thumb{width:inherit;height:.25rem;background:#dcdcdc;border-radius:.125rem;}.sheet .close-sheet{border:0;padding:.7rem;}.sheet .bottom-sheet-body{flex-grow:1;height:100%;display:flex;flex-direction:column;overflow-y:hidden;gap:1rem;box-sizing:border-box;z-index:1;overscroll-behavior:none;}
\ No newline at end of file
+.sheet{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;position:fixed;top:0;left:0;right:0;bottom:0;z-index:3000;visibility:visible;}.sheet[data-bs-scroll]{overflow-y:hidden;}.sheet[aria-hidden]{pointer-events:none;}.sheet .overlay{position:absolute;top:0;left:0;right:0;bottom:0;z-index:-1;background:rgba(0,0,0,.9254901961);transition:opacity .25s;}.sheet:not([aria-hidden]) .overlay{opacity:.5;}.sheet[aria-hidden] .overlay{opacity:0;}.sheet .contents{display:flex;flex-direction:column;border-radius:1rem 1rem 0 0;background:#fff;overflow-y:hidden;max-width:70rem;max-height:100vh;height:0;width:100%;box-sizing:border-box;position:absolute;}.sheet .contents[full-screen]{border-radius:0;}.sheet:not([data-bs-scroll]) .contents{transition:height .25s;user-select:none;overflow:hidden!important;}.sheet .contents.fullscreen{border-radius:0;}.sheet .controls{display:flex;}.sheet .draggable-area{position:absolute;width:100%;height:6rem;cursor:grab;}.sheet .draggable-area-wrap{position:relative;}.sheet .draggable-thumb{width:inherit;height:.25rem;background:#dcdcdc;border-radius:.125rem;}.sheet .close-sheet{border:0;padding:.7rem;}.sheet .bottom-sheet-body{flex-grow:1;height:100%;display:flex;flex-direction:column;overflow-y:hidden;gap:1rem;box-sizing:border-box;z-index:1;overscroll-behavior:none;}
\ No newline at end of file
diff --git a/src/GenOne.Blazor.BottomSheet/src/wwwroot/_bottom-sheet.scss b/src/GenOne.Blazor.BottomSheet/src/wwwroot/_bottom-sheet.scss
index a3fe5c3..cc208f1 100644
--- a/src/GenOne.Blazor.BottomSheet/src/wwwroot/_bottom-sheet.scss
+++ b/src/GenOne.Blazor.BottomSheet/src/wwwroot/_bottom-sheet.scss
@@ -56,8 +56,10 @@ $max-width: 70rem;
     overflow-y: hidden;
     max-width: 70rem;
     max-height: 100vh;
-    height: 30vh;
+    height: 0vh;
+    width: 100%;
     box-sizing: border-box;
+    position: absolute;
 }
 
 .sheet .contents[full-screen] {
diff --git a/src/GenOne.Blazor.BottomSheet/src/wwwroot/bottom-sheet.js b/src/GenOne.Blazor.BottomSheet/src/wwwroot/bottom-sheet.js
index b16c2bb..9961648 100644
--- a/src/GenOne.Blazor.BottomSheet/src/wwwroot/bottom-sheet.js
+++ b/src/GenOne.Blazor.BottomSheet/src/wwwroot/bottom-sheet.js
@@ -1,15 +1,13 @@
 class BottomSheet {
     /**
      * @param {Element} sheet
-     * @param {number[]} stops
      * @param {boolean} passive
      * @param {number} sensitivity
      * @param {function} onClosedHandler
      */
-    constructor(sheet, stops = [], passive, sensitivity, onClosedHandler) {
+    constructor(sheet, passive, sensitivity, onClosedHandler) {
         this._sheet = sheet;
         this._onClosedHandler = onClosedHandler;
-        this._stops = stops;
         this._sensitivity = sensitivity;
         this._passive = passive;
 
@@ -222,9 +220,15 @@
         }
     };
 
-    open() {
+    /**
+    * Open bottom sheet
+    * @param {number[]} stops
+    */
+    open(stops) {
         if (!this._hidden) return;
 
+        this._stops = stops;
+
         this._hidden = false;
         this._height = this._stops[0];
 
@@ -330,18 +334,11 @@ export const initializeBottomSheet = (
     return new BottomSheet(sheet, stops, passive, sensitivity, onClosedHandler);
 };
 
-/**
- * Open bottom sheet
- * @param {BottomSheet} bottomSheetInstance
- */
-export const openBottomSheet = (bottomSheetInstance) => {
-    bottomSheetInstance.open();
-};
-
 /**
  * Close bottom sheet
- * @param {BottomSheet} bottomSheetInstance
+ * @param {Element} sheet
+ * @param {string} bottomOffset
  */
-export const closeBottomSheet = (bottomSheetInstance) => {
-    bottomSheetInstance.close();
+export const addBottomOffset = (sheetReference, bottomOffset) => {
+    sheetReference.querySelector('[data-bs-contents]').style.bottom = bottomOffset;
 };