diff --git a/src/components/ConversationCard/index.jsx b/src/components/ConversationCard/index.jsx
index 440bfffe..8e85ce2f 100644
--- a/src/components/ConversationCard/index.jsx
+++ b/src/components/ConversationCard/index.jsx
@@ -347,7 +347,11 @@ function ConversationCard(props) {
           className="gpt-util-group"
           style={{
             padding: '15px 0 15px 15px',
-            ...(props.notClampSize ? {} : { flexGrow: isSafari() ? 0 : 1 }),
+            ...(props.pageMode
+              ? { flexGrow: 1, minWidth: 0 }
+              : props.notClampSize
+              ? {}
+              : { flexGrow: isSafari() ? 0 : 1 }),
             ...(isSafari() ? { maxWidth: '200px' } : {}),
           }}
         >
@@ -372,11 +376,28 @@ function ConversationCard(props) {
             >
               <Pin size={16} />
             </span>
+          ) : props.onToggleSidebar ? (
+            <button
+              type="button"
+              className="gpt-util-icon gpt-menu-toggle"
+              title="Toggle sidebar"
+              aria-label="Toggle sidebar"
+              aria-expanded={Boolean(props.sidebarOpen)}
+              onClick={(e) => {
+                e.preventDefault()
+                e.stopPropagation()
+                props.onToggleSidebar()
+              }}
+            >
+              ☰
+            </button>
           ) : (
             <img src={logo} style="user-select:none;width:20px;height:20px;" />
           )}
           <select
-            style={props.notClampSize ? {} : { width: 0, flexGrow: 1 }}
+            style={
+              props.pageMode || !props.notClampSize ? { width: 0, flexGrow: 1, minWidth: 0 } : {}
+            }
             className="normal-button"
             required
             onChange={(e) => {
@@ -425,7 +446,8 @@ function ConversationCard(props) {
           style={{
             padding: '15px 15px 15px 0',
             justifyContent: 'flex-end',
-            flexGrow: props.draggable && !completeDraggable ? 0 : 1,
+            flexGrow: props.pageMode ? 0 : props.draggable && !completeDraggable ? 0 : 1,
+            flexShrink: 0,
           }}
         >
           {!config.disableWebModeHistory && session && session.conversationId && (
@@ -622,6 +644,8 @@ ConversationCard.propTypes = {
   notClampSize: PropTypes.bool,
   pageMode: PropTypes.bool,
   waitForTrigger: PropTypes.bool,
+  onToggleSidebar: PropTypes.func,
+  sidebarOpen: PropTypes.bool,
 }
 
 export default memo(ConversationCard)
diff --git a/src/pages/IndependentPanel/App.jsx b/src/pages/IndependentPanel/App.jsx
index 5552b610..6387042f 100644
--- a/src/pages/IndependentPanel/App.jsx
+++ b/src/pages/IndependentPanel/App.jsx
@@ -17,8 +17,11 @@ import { openUrl } from '../../utils/index.mjs'
 import Browser from 'webextension-polyfill'
 import FileSaver from 'file-saver'
 
+const logo = Browser.runtime.getURL('logo.png')
+
 function App() {
   const { t } = useTranslation()
+  const hasUserToggledRef = useRef(false)
   const [collapsed, setCollapsed] = useState(true)
   const config = useConfig(null, false)
   const [sessions, setSessions] = useState([])
@@ -64,6 +67,22 @@ function App() {
     })()
   }, [])
 
+  useEffect(() => {
+    // Default open only on the standalone IndependentPanel (tab/window) when wide enough.
+    // Keep the existing side-panel behavior (closed by default).
+    void (async () => {
+      if (hasUserToggledRef.current) return
+      if (!window.matchMedia('(min-width: 900px)').matches) return
+      try {
+        // In a regular tab, this returns the current tab object; in the side panel it returns null.
+        const tab = await Browser.tabs.getCurrent()
+        if (!hasUserToggledRef.current && tab) setCollapsed(false)
+      } catch (e) {
+        // If we can't tell, keep current (closed) default.
+      }
+    })()
+  }, [])
+
   useEffect(() => {
     if ('sessions' in config && config['sessions']) setSessions(config['sessions'])
   }, [config])
@@ -82,9 +101,21 @@ function App() {
   }, [sessionId])
 
   const toggleSidebar = () => {
+    hasUserToggledRef.current = true
     setCollapsed(!collapsed)
   }
 
+  const closeSidebar = () => {
+    hasUserToggledRef.current = true
+    setCollapsed(true)
+  }
+
+  const closeSidebarIfOverlay = () => {
+    if (window.matchMedia('(max-width: 600px)').matches) {
+      closeSidebar()
+    }
+  }
+
   const createNewChat = async () => {
     const { session, currentSessions } = await createSession()
     setSessions(currentSessions)
@@ -105,62 +136,80 @@ function App() {
 
   return (
     <div className="IndependentPanel">
-      <div className="chat-container">
+      <div className={`chat-container ${collapsed ? 'sidebar-collapsed' : 'sidebar-open'}`}>
+        {!collapsed && (
+          <div className="chat-sidebar-backdrop" role="presentation" onClick={closeSidebar} />
+        )}
         <div className={`chat-sidebar ${collapsed ? 'collapsed' : ''}`}>
-          <div className="chat-sidebar-button-group">
-            <button className="normal-button" onClick={toggleSidebar}>
-              {collapsed ? t('Pin') : t('Unpin')}
-            </button>
-            <button className="normal-button" onClick={createNewChat}>
-              {t('New Chat')}
-            </button>
-            <button className="normal-button" onClick={exportConversations}>
-              {t('Export')}
-            </button>
-          </div>
-          <hr />
-          <div className="chat-list">
-            {sessions.map(
-              (
-                session,
-                index, // TODO editable session name
-              ) => (
-                <button
-                  key={index}
-                  className={`normal-button ${sessionId === session.sessionId ? 'active' : ''}`}
-                  style="display: flex; align-items: center; justify-content: space-between;"
-                  onClick={() => {
-                    setSessionIdSafe(session.sessionId)
-                  }}
-                >
-                  {session.sessionName}
-                  <span className="gpt-util-group">
-                    <DeleteButton
-                      size={14}
-                      text={t('Delete Conversation')}
-                      onConfirm={() =>
-                        deleteSession(session.sessionId).then((sessions) => {
-                          setSessions(sessions)
-                          setSessionIdSafe(sessions[0].sessionId)
-                        })
-                      }
-                    />
-                  </span>
-                </button>
-              ),
-            )}
-          </div>
-          <hr />
-          <div className="chat-sidebar-button-group">
-            <ConfirmButton text={t('Clear conversations')} onConfirm={clearConversations} />
-            <button
-              className="normal-button"
-              onClick={() => {
-                openUrl(Browser.runtime.getURL('popup.html'))
-              }}
-            >
-              {t('Settings')}
-            </button>
+          <div className="chat-sidebar-content">
+            <div className="chat-sidebar-topbar">
+              <div className="chat-sidebar-brand-group">
+                <img className="chat-sidebar-logo" src={logo} alt="ChatGPTBox" />
+                <div className="chat-sidebar-brand">ChatGPTBox</div>
+              </div>
+              <button
+                type="button"
+                className="gpt-util-icon gpt-menu-toggle chat-sidebar-close"
+                aria-label="Close sidebar"
+                onClick={closeSidebar}
+              >
+                ✕
+              </button>
+            </div>
+            <div className="chat-sidebar-button-group">
+              <button className="normal-button" onClick={createNewChat}>
+                {t('New Chat')}
+              </button>
+              <button className="normal-button" onClick={exportConversations}>
+                {t('Export')}
+              </button>
+            </div>
+            <hr />
+            <div className="chat-list">
+              {sessions.map(
+                (
+                  session,
+                  index, // TODO editable session name
+                ) => (
+                  <button
+                    key={index}
+                    className={`normal-button ${sessionId === session.sessionId ? 'active' : ''}`}
+                    style="display: flex; align-items: center; justify-content: space-between;"
+                    onClick={() => {
+                      setSessionIdSafe(session.sessionId)
+                      closeSidebarIfOverlay()
+                    }}
+                  >
+                    {session.sessionName}
+                    <span className="gpt-util-group">
+                      <DeleteButton
+                        size={14}
+                        text={t('Delete Conversation')}
+                        onConfirm={() =>
+                          deleteSession(session.sessionId).then((sessions) => {
+                            setSessions(sessions)
+                            setSessionIdSafe(sessions[0].sessionId)
+                          })
+                        }
+                      />
+                    </span>
+                  </button>
+                ),
+              )}
+            </div>
+            <hr />
+            <div className="chat-sidebar-button-group">
+              <ConfirmButton text={t('Clear conversations')} onConfirm={clearConversations} />
+              <button
+                className="normal-button"
+                onClick={() => {
+                  openUrl(Browser.runtime.getURL('popup.html'))
+                  closeSidebarIfOverlay()
+                }}
+              >
+                {t('Settings')}
+              </button>
+            </div>
           </div>
         </div>
         <div className="chat-content">
@@ -170,6 +219,8 @@ function App() {
                 session={currentSession}
                 notClampSize={true}
                 pageMode={true}
+                sidebarOpen={!collapsed}
+                onToggleSidebar={toggleSidebar}
                 onUpdate={(port, session, cData) => {
                   currentPort.current = port
                   if (cData.length > 0 && cData[cData.length - 1].done) {
diff --git a/src/pages/IndependentPanel/styles.scss b/src/pages/IndependentPanel/styles.scss
index d7d76870..d376c137 100644
--- a/src/pages/IndependentPanel/styles.scss
+++ b/src/pages/IndependentPanel/styles.scss
@@ -37,10 +37,39 @@
 }
 
 .IndependentPanel {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  min-height: 100vh;
+  background-color: var(--theme-color);
+
+  .gpt-menu-toggle {
+    width: 28px;
+    height: 28px;
+    border: 1px solid var(--theme-border-color);
+    background-color: var(--theme-color);
+    color: var(--font-color);
+    border-radius: 8px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+    line-height: 1;
+  }
+
   .chat-container {
     display: flex;
     width: 100%;
-    height: 100%;
+    flex: 1 1 auto;
+    flex-grow: 1;
+    min-height: 0;
+    min-width: 0;
+    overflow: hidden;
+    position: relative;
+  }
+
+  .chat-sidebar-backdrop {
+    display: none;
   }
 
   .chat-sidebar {
@@ -51,6 +80,7 @@
     background-color: var(--theme-color);
     transition: width 0.3s, min-width 0.3s;
     padding: 10px;
+    flex-shrink: 0;
 
     ::-webkit-scrollbar {
       background-color: var(--theme-color);
@@ -67,14 +97,60 @@
   }
 
   .chat-sidebar.collapsed {
-    min-width: 60px;
-    width: 60px;
+    min-width: 0;
+    width: 0;
+    padding: 0;
   }
 
-  .chat-sidebar:hover,
-  .chat-sidebar:not(.collapsed) {
-    min-width: 250px;
-    width: 250px;
+  .chat-sidebar-content {
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+    gap: 15px;
+    overflow: hidden;
+    min-height: 0;
+  }
+
+  .chat-sidebar-topbar {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 10px;
+    margin: -10px -10px 0;
+    height: 78px;
+    padding: 15px;
+    box-sizing: border-box;
+    border-bottom: 1px solid var(--theme-border-color);
+  }
+
+  .chat-sidebar-brand-group {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    min-width: 0;
+  }
+
+  .chat-sidebar-logo {
+    width: 20px;
+    height: 20px;
+    flex: 0 0 auto;
+  }
+
+  .chat-sidebar-brand {
+    color: var(--font-color);
+    font-weight: 600;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .chat-sidebar-topbar .gpt-menu-toggle {
+    width: 28px;
+    height: 28px;
+  }
+
+  .chat-sidebar.collapsed .chat-sidebar-content {
+    display: none;
   }
 
   .chat-sidebar-button-group {
@@ -100,6 +176,72 @@
     flex-grow: 1;
     border: 1px solid var(--theme-border-color);
     background-color: var(--theme-color);
+    min-width: 0;
+    overflow: hidden;
+  }
+
+  .chat-content .chatgptbox-container {
+    min-width: 0;
+    height: 100%;
+  }
+
+  .chat-content .gpt-inner {
+    min-width: 0;
+    height: 100%;
+  }
+
+  .chat-content .gpt-header {
+    flex-wrap: wrap;
+    row-gap: 8px;
+  }
+
+  .chat-content .gpt-header > .gpt-util-group {
+    min-width: 0;
+  }
+
+  .chat-content .gpt-header > .gpt-util-group:first-child select.normal-button {
+    width: 0;
+    flex: 1 1 auto;
+    min-width: 0;
+    max-width: 100%;
+  }
+
+  @media screen and (max-width: 600px) {
+    .chat-container.sidebar-open .chat-sidebar-backdrop {
+      display: block;
+      position: absolute;
+      inset: 0;
+      background-color: rgba(0, 0, 0, 0.35);
+      z-index: 10;
+    }
+
+    .chat-sidebar {
+      position: absolute;
+      top: 0;
+      left: 0;
+      height: 100%;
+      width: min(280px, 85vw);
+      min-width: 0;
+      transform: translateX(0);
+      transition: transform 0.3s;
+      visibility: visible;
+      z-index: 11;
+      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
+    }
+
+    .chat-sidebar.collapsed {
+      width: min(280px, 85vw);
+      min-width: 0;
+      transform: translateX(-105%);
+      padding: 10px;
+      visibility: hidden;
+      pointer-events: none;
+      transition: transform 0.3s, visibility 0s linear 0.3s;
+    }
+
+    .chat-sidebar.collapsed .chat-sidebar-content {
+      display: flex;
+    }
   }
 
   .normal-button {