diff --git a/src/client/components/Article.tsx b/src/client/components/Article.tsx
index 0686c65..94af8a1 100644
--- a/src/client/components/Article.tsx
+++ b/src/client/components/Article.tsx
@@ -21,21 +21,8 @@ interface Props {
 
 export const Article = ({ renderedBody, tags, title }: Props) => {
   const bodyElement = useRef<HTMLDivElement>(null);
-  const [isOpen, setIsOpen] = useState(
-    localStorage.getItem("openArticleState") === "true" ? true : false
-  );
-
   const [isRendered, setIsRendered] = useState(false);
 
-  const toggleAccordion = (event: React.MouseEvent<HTMLInputElement>) => {
-    event.preventDefault();
-    setIsOpen((prev) => !prev);
-  };
-
-  useEffect(() => {
-    localStorage.setItem("openArticleState", JSON.stringify(isOpen));
-  }, [isOpen]);
-
   useEffect(() => {
     if (isRendered) {
       bodyElement.current && executeScriptTagsInElement(bodyElement.current);
diff --git a/src/client/components/Layout.tsx b/src/client/components/Layout.tsx
new file mode 100644
index 0000000..09f3c04
--- /dev/null
+++ b/src/client/components/Layout.tsx
@@ -0,0 +1,10 @@
+import { Outlet, ScrollRestoration } from "react-router-dom";
+
+export const Layout = () => {
+  return (
+    <div>
+      <Outlet />
+      <ScrollRestoration />
+    </div>
+  );
+};
diff --git a/src/client/components/Router.tsx b/src/client/components/Router.tsx
index 2bafe31..47ddd84 100644
--- a/src/client/components/Router.tsx
+++ b/src/client/components/Router.tsx
@@ -1,15 +1,22 @@
 import { createBrowserRouter, RouterProvider } from "react-router-dom";
 import { ItemsIndex } from "../pages/items";
 import { ItemsShow } from "../pages/items/show";
+import { Layout } from "./Layout";
 
 const router = createBrowserRouter([
   {
     path: "/",
-    element: <ItemsIndex />,
-  },
-  {
-    path: "/items/:id",
-    element: <ItemsShow />,
+    element: <Layout />,
+    children: [
+      {
+        index: true,
+        element: <ItemsIndex />,
+      },
+      {
+        path: "/items/:id",
+        element: <ItemsShow />,
+      },
+    ],
   },
 ]);
 
diff --git a/src/client/components/SidebarContents.tsx b/src/client/components/SidebarContents.tsx
index c6745ed..7baac43 100644
--- a/src/client/components/SidebarContents.tsx
+++ b/src/client/components/SidebarContents.tsx
@@ -694,6 +694,8 @@ const closedSidebarStyle = css({
   justifyContent: "space-between",
   maxWidth: 48,
   padding: `${getSpace(1)}px ${getSpace(1 / 2)}px ${getSpace(2)}px`,
+  position: "sticky",
+  top: 0,
 
   ...viewport.S({
     display: "none",
diff --git a/src/client/templates/Contents.tsx b/src/client/templates/Contents.tsx
index 248f1c7..b5c6e82 100644
--- a/src/client/templates/Contents.tsx
+++ b/src/client/templates/Contents.tsx
@@ -11,7 +11,5 @@ export const Contents = ({ children }: Props) => {
 
 const contentsStyle = css({
   gridArea: "contents",
-  height: "100vh",
-  overflowX: "auto",
   width: "100%",
 });
diff --git a/src/client/templates/Main.tsx b/src/client/templates/Main.tsx
index c8885e8..7684ae4 100644
--- a/src/client/templates/Main.tsx
+++ b/src/client/templates/Main.tsx
@@ -18,9 +18,8 @@ const mainStyle = css({
   "sidebar contents"
   `,
   gridTemplateColumns: "auto minmax(450px, 1fr)",
-  height: "100vh",
 
   ...viewport.S({
-    gridTemplateColumns: "auto 1fr",
+    gridTemplateColumns: "auto minmax(0, 1fr)", // Setting min width to prevent widening
   }),
 });
diff --git a/src/client/templates/Sidebar.tsx b/src/client/templates/Sidebar.tsx
index ff98251..f9a4a16 100644
--- a/src/client/templates/Sidebar.tsx
+++ b/src/client/templates/Sidebar.tsx
@@ -14,4 +14,6 @@ export const Sidebar = ({ children }: Props) => {
 const sidebarStyle = css({
   backgroundColor: Colors.gray0,
   gridArea: "sidebar",
+  position: "sticky",
+  zIndex: 1,
 });