diff --git a/platform/ui/src/components/SidePanel/SidePanel.jsx b/platform/ui/src/components/SidePanel/SidePanel.jsx
index 62c08f088..eebdcd703 100644
--- a/platform/ui/src/components/SidePanel/SidePanel.jsx
+++ b/platform/ui/src/components/SidePanel/SidePanel.jsx
@@ -20,8 +20,8 @@ const dynamicStyle = {
 };
 
 const sideClasses = {
-  left: 'border-r-1',
-  right: 'border-l-1',
+  left: 'border-r-4',
+  right: 'border-l-4',
 };
 
 const baseClassName =
@@ -36,8 +36,8 @@ const SidePanel = ({
   iconName,
 }) => {
   const [isOpen, setIsOpen] = useState(defaultIsOpen);
-
-  const style = Object.assign({}, isOpen ? openStyle : closedStyle, baseStyle);
+  const openStatus = isOpen ? 'open' : 'closed';
+  const style = Object.assign({}, dynamicStyle[openStatus][side]);
 
   return (
     <div
diff --git a/platform/ui/src/views/Viewer/Viewer.js b/platform/ui/src/views/Viewer/Viewer.js
index c9e0ada40..8a2805533 100644
--- a/platform/ui/src/views/Viewer/Viewer.js
+++ b/platform/ui/src/views/Viewer/Viewer.js
@@ -15,18 +15,16 @@ const Viewer = () => {
       >
         <SidePanel
           side="left"
-          className="h-100 bg-primary-light border-r-1 border-black"
           iconName="launch-arrow"
           componentName="Study List"
         >
           <div>GUSTAVO</div>
         </SidePanel>
-        <div className="flex-1 h-100 overflow-hidden w-100 bg-black">
+        <div className="flex-1 h-100 overflow-hidden w-100 bg-primary-main">
           CONTENT
         </div>
         <SidePanel
           side="right"
-          className="h-100 bg-primary-light border-l-1 border-black"
           iconName="launch-arrow"
           componentName="Measurements"
         >