diff --git a/app/client/packages/design-system/widgets/src/components/Sidebar/src/Sidebar.tsx b/app/client/packages/design-system/widgets/src/components/Sidebar/src/Sidebar.tsx
index 60b628f8daec..820de64e50f3 100644
--- a/app/client/packages/design-system/widgets/src/components/Sidebar/src/Sidebar.tsx
+++ b/app/client/packages/design-system/widgets/src/components/Sidebar/src/Sidebar.tsx
@@ -3,7 +3,6 @@ import * as React from "react";
 import { type Ref, useRef, useState } from "react";
 import { CSSTransition } from "react-transition-group";
 
-import { Sheet } from "../../Sheet";
 import styles from "./styles.module.css";
 import { useSidebar } from "./use-sidebar";
 import type { SidebarProps } from "./types";
@@ -19,13 +18,12 @@ const _Sidebar = (props: SidebarProps, ref: Ref<HTMLDivElement>) => {
     onEntered: onEnteredProp,
     onExit: onExitProp,
     onExited: onExitedProp,
-    side = "start",
     title,
     variant = "sidebar",
     ...rest
   } = props;
   const [isAnimating, setIsAnimating] = useState(false);
-  const { isMobile, setState, state } = useSidebar();
+  const { side, state } = useSidebar();
   const sidebarRef = useRef<HTMLDivElement>();
 
   const onEnter = () => {
@@ -64,22 +62,6 @@ const _Sidebar = (props: SidebarProps, ref: Ref<HTMLDivElement>) => {
     );
   }
 
-  if (Boolean(isMobile)) {
-    return (
-      <Sheet
-        isOpen={state === "expanded"}
-        onEnter={onEnter}
-        onEntered={onEntered}
-        onExit={onExit}
-        onExited={onExited}
-        onOpenChange={(isOpen) => setState(isOpen ? "expanded" : "collapsed")}
-        position={side}
-      >
-        {content}
-      </Sheet>
-    );
-  }
-
   return (
     <CSSTransition
       in={state === "full-width"}
diff --git a/app/client/packages/design-system/widgets/src/components/Sidebar/src/SidebarContent.tsx b/app/client/packages/design-system/widgets/src/components/Sidebar/src/SidebarContent.tsx
index f72ee85dc5c9..7f88187391f6 100644
--- a/app/client/packages/design-system/widgets/src/components/Sidebar/src/SidebarContent.tsx
+++ b/app/client/packages/design-system/widgets/src/components/Sidebar/src/SidebarContent.tsx
@@ -33,9 +33,17 @@ const _SidebarContent = (
           className={styles.sidebarHeader}
           isInner
           justifyContent="space-between"
-          padding="spacing-2"
         >
-          {Boolean(title) && <Text lineClamp={1}>{title}</Text>}
+          {Boolean(title) && (
+            <Text
+              className={styles.sidebarTitle}
+              fontWeight={500}
+              lineClamp={1}
+              textAlign="center"
+            >
+              {title}
+            </Text>
+          )}
           {!isMobile && (
             <Button
               color="neutral"
diff --git a/app/client/packages/design-system/widgets/src/components/Sidebar/src/SidebarInset.tsx b/app/client/packages/design-system/widgets/src/components/Sidebar/src/SidebarInset.tsx
deleted file mode 100644
index f6c3a1d0bc57..000000000000
--- a/app/client/packages/design-system/widgets/src/components/Sidebar/src/SidebarInset.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import clsx from "clsx";
-import * as React from "react";
-import type { ComponentProps, Ref } from "react";
-
-import styles from "./styles.module.css";
-
-export const _SidebarInset = (
-  props: ComponentProps<"main">,
-  ref: Ref<HTMLDivElement>,
-) => {
-  const { className, ...rest } = props;
-
-  return (
-    <main
-      className={clsx(styles.sidebarInset, className)}
-      ref={ref}
-      {...rest}
-    />
-  );
-};
-
-export const SidebarInset = React.forwardRef(_SidebarInset);
diff --git a/app/client/packages/design-system/widgets/src/components/Sidebar/src/SidebarProvider.tsx b/app/client/packages/design-system/widgets/src/components/Sidebar/src/SidebarProvider.tsx
index 16dcc26a5a85..602fe9c2a5a6 100644
--- a/app/client/packages/design-system/widgets/src/components/Sidebar/src/SidebarProvider.tsx
+++ b/app/client/packages/design-system/widgets/src/components/Sidebar/src/SidebarProvider.tsx
@@ -20,6 +20,7 @@ export const _SidebarProvider = (
     className,
     defaultState = "expanded",
     onStateChange: setStateProp,
+    side = "end",
     state: stateProp,
     style,
     ...rest
@@ -69,9 +70,10 @@ export const _SidebarProvider = (
       state,
       setState,
       isMobile,
+      side,
       toggleSidebar,
     }),
-    [state, setState, isMobile, toggleSidebar],
+    [state, setState, isMobile, toggleSidebar, side],
   );
 
   return (
@@ -81,7 +83,6 @@ export const _SidebarProvider = (
         ref={ref}
         style={
           {
-            "--sidebar-width": SIDEBAR_CONSTANTS.WIDTH.DESKTOP,
             "--sidebar-width-icon": SIDEBAR_CONSTANTS.WIDTH.ICON,
             ...style,
           } as React.CSSProperties
diff --git a/app/client/packages/design-system/widgets/src/components/Sidebar/src/SidebarTrigger.tsx b/app/client/packages/design-system/widgets/src/components/Sidebar/src/SidebarTrigger.tsx
index 4649d3ae877c..87a3b1d21b89 100644
--- a/app/client/packages/design-system/widgets/src/components/Sidebar/src/SidebarTrigger.tsx
+++ b/app/client/packages/design-system/widgets/src/components/Sidebar/src/SidebarTrigger.tsx
@@ -9,15 +9,19 @@ interface SidebarTriggerProps {
 
 export const SidebarTrigger = (props: SidebarTriggerProps) => {
   const { onPress } = props;
-  const { state, toggleSidebar } = useSidebar();
+  const { side, state, toggleSidebar } = useSidebar();
 
   return (
     <Button
       color="neutral"
       icon={
-        state === "expanded"
-          ? "layout-sidebar-right-collapse"
-          : "layout-sidebar-left-collapse"
+        state === "collapsed"
+          ? side === "start"
+            ? "layout-sidebar-left-expand"
+            : "layout-sidebar-right-expand"
+          : side === "start"
+            ? "layout-sidebar-left-collapse"
+            : "layout-sidebar-right-collapse"
       }
       onPress={() => {
         onPress?.();
diff --git a/app/client/packages/design-system/widgets/src/components/Sidebar/src/index.ts b/app/client/packages/design-system/widgets/src/components/Sidebar/src/index.ts
index 7a7b66a4ebe1..eb313453828c 100644
--- a/app/client/packages/design-system/widgets/src/components/Sidebar/src/index.ts
+++ b/app/client/packages/design-system/widgets/src/components/Sidebar/src/index.ts
@@ -1,6 +1,5 @@
 export { Sidebar } from "./Sidebar";
 export { SidebarProvider } from "./SidebarProvider";
-export { SidebarInset } from "./SidebarInset";
 export { SidebarTrigger } from "./SidebarTrigger";
 export { SidebarContent } from "./SidebarContent";
 export { useSidebar } from "./use-sidebar";
diff --git a/app/client/packages/design-system/widgets/src/components/Sidebar/src/styles.module.css b/app/client/packages/design-system/widgets/src/components/Sidebar/src/styles.module.css
index 91c640d923b5..13eef6e47684 100644
--- a/app/client/packages/design-system/widgets/src/components/Sidebar/src/styles.module.css
+++ b/app/client/packages/design-system/widgets/src/components/Sidebar/src/styles.module.css
@@ -13,20 +13,25 @@
  *-----------------------------------------------------
  */
 .mainSidebar {
-  display: none;
+  --sidebar-width: 100cqw;
+  display: block;
   color: var(--color-fg);
 }
 
-@container (min-width: 768px) {
-  .mainSidebar {
-    display: block;
-  }
-}
-
 .mainSidebar[data-collapsible="icon"] {
   overflow: hidden;
 }
 
+[data-state="full-width"] .sidebar {
+  --sidebar-width: 100cqw;
+}
+
+@container (width > 550px) {
+  .mainSidebar {
+    --sidebar-width: min(50cqw, 1024px);
+  }
+}
+
 /**
  *-----------------------------------------------------
  * FAKE SIDEBAR
@@ -57,11 +62,6 @@
   width: var(--sidebar-width-icon);
 }
 
-.mainSidebar[data-variant="floating"][data-collapsible="icon"] .fakeSidebar,
-.mainSidebar[data-variant="inset"][data-collapsible="icon"] .fakeSidebar {
-  width: calc(var(--sidebar-width-icon) + var(--inner-spacing-2));
-}
-
 /**
  *-----------------------------------------------------
  * SIDEBAR
@@ -72,7 +72,7 @@
   top: 0;
   bottom: 0;
   z-index: 10;
-  display: none;
+  display: flex;
   height: 100%;
   width: var(--sidebar-width);
   transition:
@@ -82,16 +82,6 @@
   background-color: var(--color-bg-elevation-2);
 }
 
-[data-state="full-width"] .sidebar {
-  width: 100%;
-}
-
-@container (min-width: 768px) {
-  .sidebar {
-    display: flex;
-  }
-}
-
 .mainSidebar[data-side="start"] .sidebar {
   left: 0;
 }
@@ -108,45 +98,25 @@
   right: calc(var(--sidebar-width) * -1);
 }
 
-.mainSidebar[data-variant="floating"] .sidebar,
-.mainSidebar[data-variant="inset"] .sidebar {
-  padding: var(--inner-spacing-2);
-}
-
 .mainSidebar[data-collapsible="icon"] .sidebar {
   width: calc(var(--sidebar-width-icon));
 }
 
-.mainSidebar[data-variant="floating"][data-collapsible="icon"] .sidebar,
-.mainSidebar[data-variant="inset"][data-collapsible="icon"] .sidebar {
-  width: calc(var(--sidebar-width-icon) + var(--inner-spacing-2) + 2px);
-}
-
-.mainSidebar[data-side="start"]:not([data-variant="floating"]):not(
-    [data-variant="inset"]
-  )
-  .sidebar {
-  border-inline-end: var(--border-width-1) solid var(--color-bd-elevation-1);
-}
+@container (width > 550px) {
+  .mainSidebar[data-side="start"] .sidebar {
+    border-inline-end: var(--border-width-1) solid var(--color-bd-elevation-1);
+  }
 
-.mainSidebar[data-side="end"]:not([data-variant="floating"]):not(
-    [data-variant="inset"]
-  )
-  .sidebar {
-  border-inline-start: var(--border-width-1) solid var(--color-bd-elevation-1);
+  .mainSidebar[data-side="end"] .sidebar {
+    border-inline-start: var(--border-width-1) solid var(--color-bd-elevation-1);
+  }
 }
 
-.mainSidebar[data-state="full-width"][data-side="start"]:is(
-    [data-variant="sidebar"]
-  )
-  .sidebar {
+.mainSidebar[data-state="full-width"][data-side="start"] .sidebar {
   border-inline-end: none;
 }
 
-.mainSidebar[data-state="full-width"][data-side="end"]:is(
-    [data-variant="sidebar"]
-  )
-  .sidebar {
+.mainSidebar[data-state="full-width"][data-side="end"] .sidebar {
   border-inline-start: none;
 }
 
@@ -170,12 +140,6 @@
   border-inline-end: var(--border-width-1) solid var(--color-bd-subtle);
 }
 
-.mainSidebar[data-variant="floating"] .sidebarContainer {
-  border-radius: var(--border-radius-elevation-3);
-  border: var(--border-width-1) solid var(--color-bd);
-  box-shadow: var(--box-shadow-1);
-}
-
 /**
  *-----------------------------------------------------
  * SIDEBAR CONTENT
@@ -192,47 +156,20 @@
   width: 100%;
 }
 
-/**
- *-----------------------------------------------------
- * SIDEBAR INSET
- *-----------------------------------------------------
- */
-.sidebarInset {
-  position: relative;
-  display: flex;
-  min-height: 100%;
-  flex: 1;
-  flex-direction: column;
-  background-color: var(--background);
-}
-
-[data-variant="inset"] ~ .sidebarInset {
-  min-height: calc(100% - var(--inner-spacing-2) * 2);
-}
-
-@container (min-width: 768px) {
-  [data-variant="inset"] ~ .sidebarInset {
-    margin: var(--inner-spacing-2);
-    border-radius: var(--border-radius-elevation-3);
-    box-shadow: var(--box-shadow-1);
-    border: var(--border-width-1) solid var(--color-bd);
-  }
-
-  /* Handle margin when sidebar is collapsed */
-  [data-state="collapsed"][data-variant="inset"] ~ .sidebarInset {
-    margin-left: var(--inner-spacing-2);
-  }
-
-  [data-variant="inset"] ~ .sidebarInset {
-    margin-left: 0;
-  }
-}
-
 /**
  *-----------------------------------------------------
  * SIDEBAR HEADER
  *-----------------------------------------------------
  */
 .sidebarHeader {
+  height: var(--sizing-13);
+  padding: 0 var(--inner-spacing-2);
   border-bottom: var(--border-width-1) solid var(--color-bd-elevation-1);
 }
+
+.sidebarTitle {
+  position: absolute;
+  left: 0;
+  right: 0;
+  margin: 0 var(--sizing-14);
+}
diff --git a/app/client/packages/design-system/widgets/src/components/Sidebar/src/types.ts b/app/client/packages/design-system/widgets/src/components/Sidebar/src/types.ts
index 00f84b13757a..c67f2bac0232 100644
--- a/app/client/packages/design-system/widgets/src/components/Sidebar/src/types.ts
+++ b/app/client/packages/design-system/widgets/src/components/Sidebar/src/types.ts
@@ -1,10 +1,14 @@
 import type { ReactNode } from "react";
 
+export type SidebarState = "collapsed" | "expanded" | "full-width";
+
+export type SidebarSide = "start" | "end";
 export interface SidebarContextType {
   state: SidebarState;
   setState: (state: SidebarState) => void;
   isMobile: boolean;
   toggleSidebar: () => void;
+  side: SidebarSide;
 }
 
 export interface SidebarProviderProps {
@@ -14,12 +18,10 @@ export interface SidebarProviderProps {
   children: ReactNode;
   className?: string;
   style?: React.CSSProperties;
+  side?: SidebarSide;
 }
 
-export type SidebarState = "collapsed" | "expanded" | "full-width";
-
 export interface SidebarProps {
-  side?: "start" | "end";
   variant?: "sidebar" | "floating" | "inset";
   collapsible?: "offcanvas" | "icon" | "none";
   onEnter?: () => void;
diff --git a/app/client/packages/design-system/widgets/src/components/Sidebar/stories/Sidebar.stories.tsx b/app/client/packages/design-system/widgets/src/components/Sidebar/stories/Sidebar.stories.tsx
index b460c3c4740e..01c12545b70f 100644
--- a/app/client/packages/design-system/widgets/src/components/Sidebar/stories/Sidebar.stories.tsx
+++ b/app/client/packages/design-system/widgets/src/components/Sidebar/stories/Sidebar.stories.tsx
@@ -1,11 +1,6 @@
 import React from "react";
 import type { Meta, StoryObj } from "@storybook/react";
-import {
-  Sidebar,
-  SidebarTrigger,
-  SidebarProvider,
-  SidebarInset,
-} from "../src/index";
+import { Sidebar, SidebarTrigger, SidebarProvider } from "../src/index";
 import { Flex } from "../../Flex";
 import { Text, Icon } from "@appsmith/wds";
 
@@ -23,22 +18,21 @@ const meta: Meta<typeof Sidebar> = {
   },
   args: {
     title: "Sidebar",
-    side: "start",
-    variant: "sidebar",
   },
   render: (args) => (
     <SidebarProvider
+      defaultState="collapsed"
       style={{
         height: "50vh",
         border: "1px solid var(--color-bd-elevation-1)",
       }}
     >
-      <Sidebar {...args}>
-        <DemoContent />
-      </Sidebar>
       <Flex alignItems="start" margin="spacing-4" width="100%">
         <SidebarTrigger />
       </Flex>
+      <Sidebar {...args}>
+        <DemoContent />
+      </Sidebar>
     </SidebarProvider>
   ),
 };
@@ -72,39 +66,11 @@ export const Default: Story = {
   args: {},
 };
 
-export const SideRight: Story = {
-  args: {
-    side: "end",
-  },
-  render: (args) => (
-    <SidebarProvider
-      style={{
-        height: "50vh",
-        border: "1px solid var(--color-bd-elevation-1)",
-      }}
-    >
-      <Flex alignItems="start" margin="spacing-4" width="100%">
-        <SidebarTrigger />
-      </Flex>
-      <Sidebar {...args}>
-        <DemoContent />
-      </Sidebar>
-    </SidebarProvider>
-  ),
-};
-
-export const VariantFloating: Story = {
-  args: {
-    variant: "floating",
-  },
-};
-
-export const VariantInset: Story = {
-  args: {
-    variant: "inset",
-  },
+export const SideLeft: Story = {
+  args: {},
   render: (args) => (
     <SidebarProvider
+      side="start"
       style={{
         height: "50vh",
         border: "1px solid var(--color-bd-elevation-1)",
@@ -113,11 +79,9 @@ export const VariantInset: Story = {
       <Sidebar {...args}>
         <DemoContent />
       </Sidebar>
-      <SidebarInset>
-        <Flex alignItems="start" margin="spacing-4" width="100%">
-          <SidebarTrigger />
-        </Flex>
-      </SidebarInset>
+      <Flex alignItems="start" margin="spacing-4" width="100%">
+        <SidebarTrigger />
+      </Flex>
     </SidebarProvider>
   ),
 };
@@ -130,6 +94,9 @@ export const WithRenderProps: Story = {
         border: "1px solid var(--color-bd-elevation-1)",
       }}
     >
+      <Flex alignItems="start" margin="spacing-4" width="100%">
+        <SidebarTrigger />
+      </Flex>
       <Sidebar {...args}>
         {({ isAnimating, state }) => (
           <Flex direction="column" gap="spacing-2" padding="spacing-4">
@@ -156,11 +123,6 @@ export const WithRenderProps: Story = {
           </Flex>
         )}
       </Sidebar>
-      <SidebarInset>
-        <Flex alignItems="start" margin="spacing-4" width="100%">
-          <SidebarTrigger />
-        </Flex>
-      </SidebarInset>
     </SidebarProvider>
   ),
 };