diff --git a/components/ThemeList.jsx b/components/ThemeList.jsx
index 5d3c0fded..480060d7f 100644
--- a/components/ThemeList.jsx
+++ b/components/ThemeList.jsx
@@ -24,7 +24,8 @@ import LocaleUtils from '../utils/LocaleUtils';
 import ThemeUtils from '../utils/ThemeUtils';
 import Icon from './Icon';
 
-import './style/ThemeList.css';
+import './style/ThemeListPortal.css';
+import './style/ThemeListSidebar.css';
 
 class ThemeList extends React.Component {
     static propTypes = {
@@ -45,7 +46,8 @@ class ThemeList extends React.Component {
         setUserInfoFields: PropTypes.func,
         showDefaultThemeSelector: PropTypes.bool,
         showLayerAfterChangeTheme: PropTypes.bool,
-        themes: PropTypes.object
+        themes: PropTypes.object,
+        className: PropTypes.string
     };
     state = {
         expandedGroups: [],
@@ -130,22 +132,6 @@ class ThemeList extends React.Component {
                             onClick={() => this.setTheme(item)}
                             title={title}
                         >
-                            <div className="theme-item-title" title={item.title}>
-                                <span>{item.title}</span>
-
-                            </div>
-                            {!isEmpty(infoLinks) ? (<div className={"theme-item-info-menu " + (this.state.visibleThemeInfoMenu ? "theme-item-info-menu-active" : "")} onClick={ev => this.toggleThemeInfoMenu(ev, item.id)}>
-                                <Icon icon="info" />
-                                {item.themeInfoLinks.title ? (<span>{item.themeInfoLinks.title}</span>) : LocaleUtils.tr(item.themeInfoLinks.titleMsgId)}
-                                <Icon icon="triangle-down" />
-                                {this.state.visibleThemeInfoMenu === item.id ? (
-                                    <div className="theme-item-info-links" onClick={ev => ev.stopPropagation()}>
-                                        {infoLinks.map(link => (
-                                            <a href={link.url} key={link.name} target={link.target}>{link.title}</a>
-                                        ))}
-                                    </div>
-                                ) : null}
-                            </div>) : null}
                             <div className="theme-item-body">
                                 {item.description ? (<div className="theme-item-description" dangerouslySetInnerHTML={{__html: item.description}} />) : null}
                                 <img className="theme-item-thumbnail" src={assetsPath + "/" + item.thumbnail} />
@@ -162,13 +148,22 @@ class ThemeList extends React.Component {
                                     <Icon icon="lock" />
                                 </div>
                             )}
-                            {isEmpty(matches) ? null : (
-                                <div className="theme-item-filterinfo-overlay">
-                                    {matches.map(match => (
-                                        <div key={match[0]} title={match[2]}><i>{LocaleUtils.tr(match[0])}:</i><br />{match[1][0]}<b>{match[1][1]}</b>{match[1][2]}</div>
-                                    ))}
-                                </div>
-                            )}
+                            <div className="theme-item-title" title={item.title}>
+                                <span>{item.title}</span>
+
+                            </div>
+                            {!isEmpty(infoLinks) ? (<div className={"theme-item-info-menu " + (this.state.visibleThemeInfoMenu ? "theme-item-info-menu-active" : "")} onClick={ev => this.toggleThemeInfoMenu(ev, item.id)}>
+                                <Icon icon="info" />
+                                {item.themeInfoLinks.title ? (<span>{item.themeInfoLinks.title}</span>) : LocaleUtils.tr(item.themeInfoLinks.titleMsgId)}
+                                <Icon icon="triangle-down" />
+                                {this.state.visibleThemeInfoMenu === item.id ? (
+                                    <div className="theme-item-info-links" onClick={ev => ev.stopPropagation()}>
+                                        {infoLinks.map(link => (
+                                            <a href={link.url} key={link.name} target={link.target}>{link.title}</a>
+                                        ))}
+                                    </div>
+                                ) : null}
+                            </div>) : null}
                         </li>
                     );
                 })}
@@ -190,9 +185,10 @@ class ThemeList extends React.Component {
         return false;
     };
     render() {
+        const { className } = this.props;
         const filter = this.props.filter ? new RegExp(removeDiacritics(this.props.filter).replace(/[-[\]/{}()*+?.\\^$|]/g, "\\$&"), "i") : null;
         return (
-            <div className="ThemeList">
+            <div className={`ThemeList ${className}`}>
                 {this.renderThemeGroup(this.props.themes, filter)}
             </div>
         );
diff --git a/components/style/ThemeListPortal.css b/components/style/ThemeListPortal.css
new file mode 100644
index 000000000..bdbaff693
--- /dev/null
+++ b/components/style/ThemeListPortal.css
@@ -0,0 +1,197 @@
+div.ThemeListPortal ul {
+    padding: 0;
+    list-style-type: none;
+}
+
+div.ThemeListPortal li.theme-group-header > span {
+    font-weight: bold;
+    display: flex;
+    align-items: center;
+    border-bottom: 1px solid var(--border-color);
+    padding: 0.25em;
+    margin: 0 0.5em 0.5em 0.5em;
+}
+
+div.ThemeListPortal li.theme-group-header > span > span.icon {
+    margin-right: 0.25em;
+}
+
+div.ThemeListPortal ul.theme-group-body {
+    padding: 0.25em;
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    align-items: center;
+    gap: 2.25em;
+}
+
+@media screen and (min-width: 426px) {
+    div.ThemeListPortal ul.theme-group-body {
+        display: flex;
+        justify-content: center;
+        flex-direction: row;
+        flex-wrap: wrap;
+    }
+}
+
+div.ThemeListPortal li.theme-group-header ul.theme-group-body {
+    margin-left: 0.25em;
+}
+
+div.ThemeListPortal li.theme-item {
+    font-weight: bold;
+    font-size: large;
+    text-align: center;
+    display: flex;
+    flex-direction: column;
+    width: 15em;
+    border-radius: 1.55em;
+    transition: all 0.3s cubic-bezier(0.4, 0, 1, 1);
+    position: relative;
+    overflow: hidden;
+    background-color: white;
+    border: none;
+}
+
+div.ThemeListPortal div.theme-item-title {
+    display: flex;
+    align-items: center;
+    padding: 0.3em 0;
+    order: 2;
+    background-color: white;
+}
+
+div.ThemeListPortal div.theme-item-title > span:first-child {
+    flex: 1 1 auto;
+    padding: 0.125em;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+div.ThemeListPortal div.theme-item-title > span.icon {
+    flex: 0 0 auto;
+    padding: 0.125em;
+    font-size: large;
+}
+
+div.ThemeListPortal li.theme-item-active div.theme-item-title > span:first-child {
+    color: var(--color-active);
+}
+
+div.ThemeListPortal img.theme-item-thumbnail {
+    width: calc(15em - 2px);
+    height: auto;
+    border-radius: 1.55em;
+    order: 1;
+}
+
+div.ThemeListPortal div.theme-item-body {
+    order: 1;
+}
+
+div.ThemeListPortal div.theme-item-icons {
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    display: flex;
+    flex-direction: column;
+}
+
+div.ThemeListPortal div.theme-item-icons > span.icon {
+    flex: 0 0 auto;
+    font-size: large;
+    padding: 0.25em;
+    background-color: var(--button-bg-color);
+    color: var(--text-color);
+    z-index: 2;
+    display: none;
+}
+
+div.ThemeListPortal div.theme-item-icons > span.icon:hover {
+    color: var(--color-active);
+}
+
+div.ThemeListPortal li.theme-item:hover div.theme-item-body {
+    background-color: transparent; 
+}
+div.ThemeListPortal li.theme-item:hover {
+    background-color: lightgray !important; 
+    border: none !important; 
+}
+div.ThemeListPortal div.theme-item-icons > span.icon-active {
+    color: var(--color-active);
+}
+div.ThemeListPortal li.theme-item:hover div.theme-item-title {
+    background-color: transparent; 
+}
+div.ThemeListPortal div.theme-item-keywords {
+    position: relative;
+    display: inline-block;
+    color: gray;
+    font-size: x-small;
+    font-weight: normal;
+    max-width: 80%;
+    overflow-x: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+}
+
+div.ThemeListPortal li.theme-item-active {
+    border: none;
+}
+
+div.ThemeListPortal div.theme-item-info-menu {
+    text-align: left;
+    display: flex;
+    align-items: center;
+    position: relative;
+    color: var(--color-active);
+    padding: 0.25em;
+}
+
+div.ThemeListPortal div.theme-item-info-menu-active {
+    background-color: var(--color-active);
+    color: white;
+}
+
+div.ThemeListPortal div.theme-item-info-menu > span.icon-info {
+    margin-right: 0.25em;
+}
+
+div.ThemeListPortal div.theme-item-info-menu > span.icon-triangle-down {
+    margin-left: 0.25em;
+    font-size: 80%;
+}
+
+div.ThemeListPortal div.theme-item-info-links {
+    position: absolute;
+    top: 100%;
+    max-width: calc(15em + 2px);
+    left: -1px;
+    right: -1px;
+    background-color: rgba(255, 255, 255, 0.85);
+    border: 1px solid var(--color-active);
+}
+
+div.ThemeListPortal div.theme-item-info-links > a {
+    display: block;
+    text-align: left;
+    padding: 0.25em;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+div.ThemeListPortal div.theme-item-restricted-overlay {
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    background-color: rgba(127, 127, 127, 0.5);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 400%;
+}
diff --git a/components/style/ThemeList.css b/components/style/ThemeListSidebar.css
similarity index 82%
rename from components/style/ThemeList.css
rename to components/style/ThemeListSidebar.css
index e6fd67691..06b632669 100644
--- a/components/style/ThemeList.css
+++ b/components/style/ThemeListSidebar.css
@@ -1,194 +1,168 @@
-div.ThemeList ul {
-    padding: 0;
-    list-style-type: none;
-}
-
-div.ThemeList li.theme-group-header > span {
-    font-weight: bold;
-    display: flex;
-    align-items: center;
-    border-bottom: 1px solid var(--border-color);
-    padding: 0.25em;
-    margin: 0 0.5em 0.5em 0.5em;
-}
-
-div.ThemeList li.theme-group-header > span > span.icon {
-    margin-right: 0.25em;
-}
-
-div.ThemeList ul.theme-group-body {
-    padding: 0.25em;
-}
-
-div.ThemeList li.theme-group-header ul.theme-group-body {
-    margin-left: 0.25em;
-}
-
-div.ThemeList li.theme-item {
-    background-color: var(--list-bg-color);
-    font-weight: bold;
-    font-size: small;
-    border: 1px solid var(--border-color);
-    margin: 0.5em;
-    text-align: center;
-    display: inline-block;
-    width: 15em;
-    position: relative;
-}
-div.ThemeList div.theme-item-title {
-    display: flex;
-    align-items: center;
-}
-
-div.ThemeList div.theme-item-title > span:first-child {
-    flex: 1 1 auto;
-    padding: 0.125em;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-}
-
-div.ThemeList div.theme-item-title > span.icon {
-    flex: 0 0 auto;
-    padding: 0.125em;
-    font-size: large;
-}
-
-div.ThemeList div.theme-item-body {
-    background-color: white;
-}
-
-div.ThemeList li.theme-item-active div.theme-item-title > span:first-child {
-    color: var(--color-active);
-}
-
-div.ThemeList img.theme-item-thumbnail {
-    width: calc(15em - 2px);
-    height: auto;
-}
-
-div.ThemeList div.theme-item-icons {
-    position: absolute;
-    bottom: 0;
-    right: 0;
-    display: flex;
-    flex-direction: column;
-}
-
-div.ThemeList div.theme-item-icons > span.icon {
-    flex: 0 0 auto;
-    font-size: large;
-    padding: 0.25em;
-    background-color: var(--button-bg-color);
-    color: var(--text-color);
-    z-index: 2;
-}
-
-div.ThemeList div.theme-item-icons > span.icon:hover {
-    color: var(--color-active);
-}
-
-div.ThemeList li.theme-item:hover {
-    border: 1px solid var(--color-active);
-}
-
-div.ThemeList div.theme-item-icons > span.icon-active {
-    color: var(--color-active);
-}
-
-div.ThemeList div.theme-item-keywords {
-    position: relative;
-    display: inline-block;
-    color: gray;
-    font-size: x-small;
-    font-weight: normal;
-    max-width: 80%;
-    overflow-x: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-}
-
-div.ThemeList li.theme-item-active {
-    border: 1px solid var(--color-active);
-}
-
-div.ThemeList div.theme-item-info-menu {
-    text-align: left;
-    display: flex;
-    align-items: center;
-    position: relative;
-    color: var(--color-active);
-    padding: 0.25em;
-}
-
-div.ThemeList div.theme-item-info-menu-active {
-    background-color: var(--color-active);
-    color: white;
-}
-
-div.ThemeList div.theme-item-info-menu > span.icon-info {
-    margin-right: 0.25em;
-}
-
-div.ThemeList div.theme-item-info-menu > span.icon-triangle-down {
-    margin-left: 0.25em;
-    font-size: 80%;
-}
-
-div.ThemeList div.theme-item-info-links {
-    position: absolute;
-    top: 100%;
-    max-width: calc(15em + 2px);
-    left: -1px;
-    right: -1px;
-    background-color: rgba(255, 255, 255, 0.85);
-    border: 1px solid var(--color-active);
-}
-
-div.ThemeList div.theme-item-info-links > a {
-    display: block;
-    text-align: left;
-    padding: 0.25em;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-}
-
-div.ThemeList div.theme-item-filterinfo-overlay {
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    right: 2.29em;
-    font-size: 90%;
-    background-color: rgba(255, 255, 255, 0.85);
-    color: black;
-    font-weight: normal;
-    text-align: left;
-    padding: 0.25em;
-    border-top: 1px solid var(--border-color);
-    border-right: 1px solid var(--border-color);
-    z-index: 1;
-}
-
-div.ThemeList div.theme-item-filterinfo-overlay > div {
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-}
-
-div.ThemeList div.theme-item-filterinfo-overlay > div:not(:last-child) {
-    padding-bottom: 0.25em;
-}
-
-div.ThemeList div.theme-item-restricted-overlay {
-    position: absolute;
-    left: 0;
-    right: 0;
-    top: 0;
-    bottom: 0;
-    background-color: rgba(127, 127, 127, 0.5);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-size: 400%;
-}
+div.ThemeList ul {
+    padding: 0;
+    list-style-type: none;
+}
+
+div.ThemeList li.theme-group-header > span {
+    font-weight: bold;
+    display: flex;
+    align-items: center;
+    border-bottom: 1px solid var(--border-color);
+    padding: 0.25em;
+    margin: 0 0.5em 0.5em 0.5em;
+}
+
+div.ThemeList li.theme-group-header > span > span.icon {
+    margin-right: 0.25em;
+}
+
+div.ThemeList ul.theme-group-body {
+    padding: 0.25em;
+}
+
+div.ThemeList li.theme-group-header ul.theme-group-body {
+    margin-left: 0.25em;
+}
+
+div.ThemeList li.theme-item {
+    background-color: var(--list-bg-color);
+    font-weight: bold;
+    margin: 0.5em;
+    text-align: center;
+    display: inline-block;
+    width: 15em;
+    position: relative;
+}
+
+div.ThemeList div.theme-item-title {
+    display: flex;
+    align-items: center;
+}
+
+div.ThemeList div.theme-item-title > span:first-child {
+    flex: 1 1 auto;
+    padding: 0.125em;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+div.ThemeList div.theme-item-title > span.icon {
+    flex: 0 0 auto;
+    padding: 0.125em;
+    font-size: large;
+}
+
+div.ThemeList div.theme-item-body {
+    background-color: white;
+}
+
+div.ThemeList li.theme-item-active div.theme-item-title > span:first-child {
+    color: var(--color-active);
+}
+
+div.ThemeList img.theme-item-thumbnail {
+    width: calc(15em - 2px);
+    height: auto;
+}
+
+div.ThemeList div.theme-item-icons {
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    display: flex;
+    flex-direction: column;
+}
+
+div.ThemeList div.theme-item-icons > span.icon {
+    flex: 0 0 auto;
+    font-size: large;
+    padding: 0.25em;
+    background-color: var(--button-bg-color);
+    color: var(--text-color);
+    z-index: 2;
+    transition: color 0.3s; /* Añadir transición para un efecto suave */
+}
+
+div.ThemeList div.theme-item-icons > span.icon:hover {
+    color: var(--color-active); /* Cambia el color del icono a azul en el hover */
+}
+
+div.ThemeList li.theme-item:hover {
+    border: 1px solid var(--color-active);
+}
+
+div.ThemeList div.theme-item-icons > span.icon-active {
+    color: var(--color-active);
+}
+
+div.ThemeList div.theme-item-keywords {
+    position: relative;
+    display: inline-block;
+    color: gray;
+    font-size: x-small;
+    font-weight: normal;
+    max-width: 80%;
+    overflow-x: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+}
+
+div.ThemeList li.theme-item-active {
+    border: 1px solid var(--color-active);
+}
+
+div.ThemeList div.theme-item-info-menu {
+    text-align: left;
+    display: flex;
+    align-items: center;
+    position: relative;
+    color: var(--color-active);
+    padding: 0.25em;
+}
+
+div.ThemeList div.theme-item-info-menu-active {
+    background-color: var(--color-active);
+    color: white;
+}
+
+div.ThemeList div.theme-item-info-menu > span.icon-info {
+    margin-right: 0.25em;
+}
+
+div.ThemeList div.theme-item-info-menu > span.icon-triangle-down {
+    margin-left: 0.25em;
+    font-size: 80%;
+}
+
+div.ThemeList div.theme-item-info-links {
+    position: absolute;
+    top: 100%;
+    max-width: calc(15em + 2px);
+    left: -1px;
+    right: -1px;
+    background-color: rgba(255, 255, 255, 0.85);
+    border: 1px solid var(--color-active);
+}
+
+div.ThemeList div.theme-item-info-links > a {
+    display: block;
+    text-align: left;
+    padding: 0.25em;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+div.ThemeList div.theme-item-restricted-overlay {
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    background-color: rgba(127, 127, 127, 0.5);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 400%;
+}
diff --git a/plugins/Portal.jsx b/plugins/Portal.jsx
index 058e6b1bd..d5802b1ae 100644
--- a/plugins/Portal.jsx
+++ b/plugins/Portal.jsx
@@ -104,7 +104,7 @@ class Portal extends React.Component {
                         showOnStartup={this.props.showMenuOnStartup} />
                 </div>
                 <div className={"portal-body " + (this.state.menuVisible ? "portal-body-menuvisible" : "")}>
-                    <ThemeList collapsibleGroups dontPreserveSettingsOnSwitch={!preserveSettings} filter={this.state.filter} />
+                    <ThemeList collapsibleGroups dontPreserveSettingsOnSwitch={!preserveSettings} filter={this.state.filter} className="ThemeListPortal" />
                 </div>
                 <div className="portal-bottombar">
                     {this.props.userName ? (
diff --git a/plugins/ThemeSwitcher.jsx b/plugins/ThemeSwitcher.jsx
index d6efbfe6c..51f5a148f 100644
--- a/plugins/ThemeSwitcher.jsx
+++ b/plugins/ThemeSwitcher.jsx
@@ -89,7 +89,8 @@ class ThemeSwitcher extends React.Component {
                                 collapsibleGroups={this.props.collapsibleGroups}
                                 filter={this.state.filter}
                                 showDefaultThemeSelector={this.props.showDefaultThemeSelector}
-                                showLayerAfterChangeTheme={this.props.showLayerAfterChangeTheme}/>
+                                showLayerAfterChangeTheme={this.props.showLayerAfterChangeTheme}
+                                className="ThemeListSidebar" />
                         )
                     })}
                 </SideBar>
diff --git a/plugins/style/Portal.css b/plugins/style/Portal.css
index c44ccd907..ea20ad9ac 100644
--- a/plugins/style/Portal.css
+++ b/plugins/style/Portal.css
@@ -1,33 +1,42 @@
 div.portal-topbar {
-    background-color: var(--titlebar-bg-color);
+    background-color: lightgray;
     position: fixed;
     left: 0;
     right: 0;
     top: 0;
-    height: 3.5em;
+    height: 4em;
     z-index: 201;
     display: flex;
     align-items: center;
 }
 
 span.portal-topbar-text {
-    color: var(--titlebar-text-color);
+    color: #595959;
     padding: 0 1.5em 0 0.5em;
     font-weight: bold;
+    margin-left: 1.5em;
 }
 
 img.portal-logo {
     width: auto;
     height: 3.5em;
     flex: 0 0 auto;
+    margin-left: 1em;
 }
 
 input.portal-search-field {
-    flex: 1 0 auto;
     height: 2em;
-    max-width: 70ch;
-    background-color: var(--input-bg-color);
-    border: 1px solid var(--border-color);
+    background-color: white;
+    border: 1px solid #bbb;
+    display: none;
+}
+
+@media screen and (min-width: 426px) {
+    input.portal-search-field {
+        display: block;
+        max-width: 70ch;
+        flex: 1 1 auto;
+    }
 }
 
 span.portal-topbar-spacer {
@@ -40,35 +49,34 @@ div.portal-topbar div.AppMenu {
 }
 
 div.portal-topbar div.AppMenu div.appmenu-menu-container {
-    height: calc(100vh - 5.75em);
-    background-color: var(--app-menu-bg-color);
+    height: calc(100vh - 6.75em);
+    background-color: white;
 }
 
 div.portal-topbar div.AppMenu ul.appmenu-menu li:last-child {
-    border-bottom: 1px solid var(--app-menu-text-color);
+    border-bottom: 1px solid #595959;
 }
 
 span.portal-menu-button {
     margin-right: 1em;
-    width: 19em;
     display: inline-block;
 }
 
 span.portal-menu-label {
     font-weight: bold;
-    color: var(--titlebar-text-color);
+    color: #595959;
+    display: none;
 }
 
 .portal-menu-icon {
-    color: var(--titlebar-text-color);
+    color: #595959;
     padding: 0.25em;
     margin: 0 1em;
-    border: 2px solid var(--titlebar-text-color);
+    border: 2px solid #595959;
 }
 
-
 div.portal-body {
-    background-color: var(--container-bg-color);
+    background-color: white;
     position: fixed;
     left: 0;
     right: 0;
@@ -86,11 +94,12 @@ div.portal-body-menuvisible div.ThemeList {
 
 div.portal-body div.ThemeList {
     flex: 1 1 auto;
+    margin: 2em 0 2em 2em;
 }
 
 div.portal-bottombar {
-    background-color: var(--titlebar-bg-color);
-    color: var(--titlebar-text-color);
+    background-color: lightgray;
+    color: #000000;
     position: fixed;
     left: 0;
     right: 0;
@@ -105,6 +114,7 @@ div.portal-bottombar {
 div.portal-bottombar-user {
     flex: 0 0 auto;
     padding: 0 0.5em;
+    margin-left: 1em;
 }
 
 div.portal-bottombar-user > span.icon {
@@ -120,10 +130,11 @@ div.portal-bottombar-links {
 }
 
 div.portal-bottombar-links > a {
-    color: var(--titlebar-text-color);
+    color: #595959;
     padding: 0 0.5em;
+    margin-right: 1em;
 }
 
 div.portal-bottombar-links > a:not(:last-child) {
-    border-right: 1px solid var(--titlebar-text-color);
+    border-right: 1px solid #595959;
 }