diff --git a/src/App.tsx b/src/App.tsx
index 8148a9dd..22b82ac3 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -104,7 +104,8 @@ function App(props: RouteComponentProps) {
 
     const currentSpec = useRef<string>();
 
-    const [isClinicalPanelOpen, setIsClinicalPanelOpen] = useState(false);
+    // Clinical Panel will only render in non-minimal mode and if the demo has clinical info
+    const [isClinicalPanelOpen, setIsClinicalPanelOpen] = useState(true);
     const CLINICAL_PANEL_WIDTH = isMinimalMode || !demo?.clinicalInfo ? 0 : isClinicalPanelOpen ? 250 : 45;
 
     // interactions
@@ -145,8 +146,8 @@ function App(props: RouteComponentProps) {
     }
 
     useEffect(() => {
-        setVisPanelWidth(INIT_VIS_PANEL_WIDTH - (VIS_PADDING.left + VIS_PADDING.right + CLINICAL_PANEL_WIDTH));
-    }, [isClinicalPanelOpen]);
+        setVisPanelWidth(INIT_VIS_PANEL_WIDTH - (VIS_PADDING.left + VIS_PADDING.right + CLINICAL_PANEL_WIDTH + 6));
+    }, [demo, isClinicalPanelOpen]);
 
     // update demo
     useEffect(() => {
@@ -196,7 +197,7 @@ function App(props: RouteComponentProps) {
         rightReads.current = [];
 
         // Update the appearance of the clinical panel
-        setIsClinicalPanelOpen(!!demo?.clinicalInfo);
+        setIsClinicalPanelOpen(!!demo?.clinicalInfo && isClinicalPanelOpen);
     }, [demo]);
 
     useEffect(() => {
@@ -564,7 +565,18 @@ function App(props: RouteComponentProps) {
             />
         );
         // !! Removed `demo` not to update twice since `drivers` are updated right after a demo update.
-    }, [ready, xDomain, visPanelWidth, drivers, showOverview, showPutativeDriver, selectedSvId, breakpoints, svReads]);
+    }, [
+        ready,
+        xDomain,
+        visPanelWidth,
+        drivers,
+        showOverview,
+        showPutativeDriver,
+        selectedSvId,
+        breakpoints,
+        svReads,
+        isClinicalPanelOpen
+    ]);
 
     const trackTooltips = useMemo(() => {
         // calculate the offset by the Genome View
@@ -981,7 +993,7 @@ function App(props: RouteComponentProps) {
                         {!isMinimalMode && (
                             <div
                                 style={{
-                                    width: `calc(100% - ${0}px)`,
+                                    width: '100%',
                                     height: '100%',
                                     boxShadow: `inset 0 0 0 3px ${
                                         interactiveMode && mouseOnVis
@@ -1481,7 +1493,7 @@ function App(props: RouteComponentProps) {
                     <GenomeViewModal />
                     <VariantViewModal />
                 </div>
-                {!isMinimalMode && demo?.clinicalInfo && (
+                {!isMinimalMode && !!demo?.clinicalInfo && (
                     <ClinicalPanel
                         demo={demo}
                         gosRef={gosRef}
diff --git a/src/css/App.css b/src/css/App.css
index b4197307..06df390d 100644
--- a/src/css/App.css
+++ b/src/css/App.css
@@ -1,5 +1,6 @@
 /* Import component-level CSS files */
 @import url('./NavigationBar.css');
+@import url('./ClinicalPanel.css');
 
 /* Overwrite Bootstrap's default box-sizing */
 *,
@@ -897,490 +898,6 @@ a:hover {
     background-color: #e6e4e4;
 }
 
-.clinical-panel-container {
-    box-sizing: border-box !important;
-    position: fixed;
-    top: 50px;
-    right: 0px;
-    width: 250px;
-    height: calc(100% - 50px);
-    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSc1JyBoZWlnaHQ9JzUnPgo8cmVjdCB3aWR0aD0nNScgaGVpZ2h0PSc1JyBmaWxsPScjZmZmJy8+CjxyZWN0IHdpZHRoPScxJyBoZWlnaHQ9JzEnIGZpbGw9JyNjY2MnLz4KPC9zdmc+);
-    background-position-x: -1px;
-
-    .clinical-panel {
-        box-sizing: border-box !important;
-        display: flex;
-        flex-direction: column;
-        margin-top: 10px;
-        padding: 10px 10px 20px;
-        border-radius: 10px 0px 0px 10px;
-        height: 100%;
-        background-color: #eef2f6;
-        border: 1px solid #d7dfe4;
-    }
-
-    .panel-header {
-        display: flex;
-        justify-content: space-between;
-        align-items: baseline;
-        padding: 0px 0px 6px 0px;
-        border-bottom: 1px solid #cad3da;
-        margin-bottom: 10px;
-
-        .panel-icon {
-            color: #434d5e;
-            height: 20px;
-            margin: 0px;
-        }
-
-        h2 {
-            font-size: 1rem;
-            font-weight: 600;
-            color: #2c3648;
-            margin-bottom: 0px;
-        }
-
-        .collapse-panel {
-            box-sizing: border-box !important;
-            display: flex;
-            justify-content: center;
-            width: 20px;
-            height: 20px;
-            background-color: #f5f5f5;
-            border: 1px solid #cad3da;
-            border-radius: 100%;
-            padding: 3px;
-            svg {
-                margin: auto;
-                color: #4d565c;
-            }
-        }
-    }
-
-    .content {
-        display: flex;
-        flex: 1;
-        flex-direction: column;
-        justify-content: flex-start;
-        padding: 0px;
-        overflow-y: auto;
-
-        .panel-section {
-            box-sizing: border-box !important;
-            display: flex;
-            flex: 1;
-            flex-direction: column;
-            justify-content: flex-start;
-            background-color: #ffffff;
-            /* border: 1px solid #CAD3DA; */
-            border-radius: 8px;
-            overflow: hidden;
-            margin-bottom: 16px;
-
-            .section-header {
-                display: flex;
-                justify-content: space-between;
-                background-color: #202f48;
-                padding: 10px;
-                border: none;
-
-                h3 {
-                    font-weight: 600;
-                    color: white;
-                    font-size: 0.875rem;
-                    margin: 0px;
-                }
-
-                .section-toggle {
-                    display: flex;
-                    justify-content: center;
-                    padding: 0px;
-                    height: 12px;
-                    width: 12px;
-                    border: none;
-                    background-color: transparent;
-                    margin: auto 0px;
-
-                    svg {
-                        margin: auto;
-                        color: white;
-                    }
-                }
-            }
-            .callout {
-                padding: 4px;
-                border-bottom: 1px solid #e0e6eb;
-
-                .content {
-                    display: flex;
-                    flex-direction: row;
-                    justify-content: center;
-                    background-color: #e9edf2;
-                    padding: 5px 8px;
-                    border-radius: 5px;
-
-                    svg {
-                        margin: auto 8px auto 0px;
-                        color: #464e55;
-                        height: 10px;
-                        width: 10px;
-                    }
-                    span {
-                        color: #464e55;
-                        font-size: 0.625rem;
-                    }
-                }
-            }
-
-            .section:focus-visible,
-            .section:focus {
-                outline-offset: -1px;
-            }
-            .section-body {
-                display: flex;
-                flex-direction: column;
-                flex: 1;
-                box-sizing: border-box !important;
-                overflow-y: scroll;
-                padding: 0px 8px;
-                font-size: 0.75rem;
-                border: solid #cad3da;
-                border-width: 0px 1px 1px 1px;
-                border-radius: 0px 0px 8px 8px;
-
-                .data-list {
-                    padding: 0px;
-                    margin-bottom: 0px;
-
-                    .data-row {
-                        box-sizing: border-box !important;
-                        display: flex;
-                        justify-content: flex-start;
-                        padding: 8px 0px;
-                        border-bottom: 1px solid #e0e6eb;
-
-                        .data-label {
-                            flex: 3;
-                            color: #565961;
-                            font-weight: 600;
-                        }
-
-                        .data-value {
-                            flex: 2;
-                            color: #000000;
-                        }
-                    }
-
-                    .data-row:last-of-type {
-                        border-bottom: none;
-                    }
-
-                    .data-row.clickable:hover {
-                        cursor: pointer;
-                        font-weight: 600;
-                    }
-                }
-            }
-        }
-
-        /* Style individual sections */
-        .panel-section.summary {
-            flex: 3;
-
-            .section-body {
-                .callout {
-                    padding: 5px 0px;
-                    .content {
-                        padding: 4px 12px;
-                        display: flex;
-                        background-color: #ffefdb;
-                        border: 1px solid #f6e4cd;
-                        border-radius: 10px;
-
-                        span {
-                            font-size: 0.75rem;
-                            color: #502d07;
-                            margin: auto;
-                            text-align: center;
-                        }
-                    }
-                }
-            }
-        }
-        .panel-section.variants {
-            flex: 2;
-            .section-body {
-                padding: 0px;
-
-                .data-list {
-                    overflow: scroll;
-                    .data-row {
-                        padding: 8px;
-                    }
-                    .data-row:nth-of-type(even) {
-                        background-color: #f5f5f5;
-                    }
-                }
-            }
-        }
-        .panel-section.signatures {
-            flex: 4;
-
-            .callout.hrdetect {
-                display: flex;
-                justify-content: space-between;
-                padding: 10px;
-                border: solid #cad3da;
-                border-width: 0px 1px;
-
-                .label {
-                    flex: 1;
-                    color: #565961;
-                    font-size: 0.75rem;
-                    font-weight: 500;
-                }
-
-                .value {
-                    flex: 1;
-                    color: #000000;
-                    font-size: 0.75rem;
-                    font-weight: 500;
-
-                    .circle-icon {
-                        width: 8px;
-                        height: 8px;
-                    }
-                    .circle-icon.positive {
-                        color: #1d9819;
-                    }
-                    .circle-icon.negative {
-                        color: lightgray;
-                    }
-
-                    span {
-                        margin-left: 5px;
-                    }
-                }
-            }
-
-            .section-body {
-                padding: 0px;
-                overflow: hidden;
-
-                .data-list {
-                    .data-row:nth-of-type(even) {
-                        background-color: #f5f5f5;
-                    }
-
-                    .data-row {
-                        display: inline-block;
-                        width: 100%;
-                        padding: 10px 8px;
-
-                        .data-label {
-                            display: inline;
-                            flex: none;
-                            color: #000000;
-                            font-weight: 600;
-                            margin-right: 0.25rem;
-                        }
-                        .data-value {
-                        }
-                    }
-                }
-            }
-        }
-
-        /* Expanded and collapsed */
-        .panel-section.expanded {
-            max-height: fit-content;
-            .section-header {
-                .section-toggle {
-                    svg {
-                        transform: rotate(180deg);
-                    }
-                }
-            }
-        }
-        .panel-section.collapsed {
-            flex: none;
-            max-height: none;
-            .section-body {
-                flex: none;
-                padding: 0px;
-                height: 0px;
-                border: none;
-            }
-
-            .callout.hrdetect {
-                display: none;
-            }
-
-            .section-header {
-                .section-toggle {
-                    svg {
-                        transform: none;
-                    }
-                }
-            }
-        }
-
-        /* Styles for toggle-able rows */
-        .dropdown-row {
-            display: flex;
-            flex-direction: column;
-            overflow: scroll;
-
-            .header {
-                box-sizing: border-box !important;
-                display: flex;
-                width: 100%;
-                justify-content: space-between;
-                background-color: #e0e6eb;
-                padding: 10px;
-                border: 1px solid #cad3da;
-                border-width: 1px 0px;
-
-                h4 {
-                    font-weight: 600;
-                    color: #2c3648;
-                    font-size: 0.75rem;
-                    margin: 0px;
-                }
-
-                .toggle {
-                    display: flex;
-                    justify-content: center;
-                    padding: 0px;
-                    height: 12px;
-                    width: 12px;
-                    border: none;
-                    background-color: transparent;
-                    margin: auto 0px;
-
-                    svg {
-                        margin: auto;
-                        color: #55606b;
-                    }
-                }
-            }
-            .header:hover {
-                background-color: #d5dce2;
-            }
-
-            .body {
-                overflow: scroll;
-            }
-        }
-        .dropdown-row.expanded {
-            flex: 1;
-            max-height: fit-content;
-
-            .header {
-                .toggle {
-                    svg {
-                        transform: rotate(180deg);
-                    }
-                }
-            }
-            .body {
-                flex: 1;
-            }
-        }
-        .dropdown-row.collapsed {
-            flex: none;
-            max-height: none;
-
-            .header {
-                .toggle {
-                    border-bottom: 0px;
-                    svg {
-                        transform: none;
-                    }
-                }
-            }
-            .callout {
-                display: none;
-            }
-            .body {
-                height: 0px;
-            }
-        }
-        .dropdown-row.disabled {
-            .header {
-                background-color: #f5f5f5;
-                pointer-events: none;
-                border-bottom: none;
-                h4 {
-                    color: gray;
-                }
-                .toggle {
-                    svg {
-                        transform: none;
-                        color: gray;
-                    }
-                }
-            }
-        }
-    }
-}
-
-.clinical-panel-container.open {
-    box-sizing: border-box !important;
-    position: fixed;
-    top: 50px;
-    right: 0px;
-    width: 250px;
-    height: calc(100% - 50px);
-    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSc1JyBoZWlnaHQ9JzUnPgo8cmVjdCB3aWR0aD0nNScgaGVpZ2h0PSc1JyBmaWxsPScjZmZmJy8+CjxyZWN0IHdpZHRoPScxJyBoZWlnaHQ9JzEnIGZpbGw9JyNjY2MnLz4KPC9zdmc+);
-    background-position-x: -1px;
-}
-.clinical-panel-container.closed {
-    width: 45px;
-
-    .clinical-panel {
-        width: 100%;
-    }
-
-    .panel-header {
-        flex-direction: column-reverse;
-        justify-content: center;
-        align-items: center;
-        gap: 8px;
-        border: none;
-
-        h2 {
-            display: none;
-        }
-
-        .collapse-panel {
-            svg {
-                transform: rotate(180deg);
-            }
-        }
-    }
-
-    .panel-section {
-        display: none;
-    }
-}
-
-.clinical-panel-container.closed.disabled {
-    .clinical-panel {
-        background-color: #f5f5f5;
-
-        .panel-header {
-            .panel-icon {
-                color: gray;
-            }
-
-            .collapse-panel {
-                display: none;
-            }
-        }
-    }
-}
-
 /* Minimal Mode styles */
 .minimal_mode {
     .gosling-panel {
diff --git a/src/css/ClinicalPanel.css b/src/css/ClinicalPanel.css
new file mode 100644
index 00000000..a103efc5
--- /dev/null
+++ b/src/css/ClinicalPanel.css
@@ -0,0 +1,486 @@
+.clinical-panel-container {
+    box-sizing: border-box !important;
+    position: fixed;
+    top: 50px;
+    right: 0px;
+    width: 250px;
+    height: calc(100% - 50px);
+    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSc1JyBoZWlnaHQ9JzUnPgo8cmVjdCB3aWR0aD0nNScgaGVpZ2h0PSc1JyBmaWxsPScjZmZmJy8+CjxyZWN0IHdpZHRoPScxJyBoZWlnaHQ9JzEnIGZpbGw9JyNjY2MnLz4KPC9zdmc+);
+    background-position-x: -1px;
+
+    .clinical-panel {
+        box-sizing: border-box !important;
+        display: flex;
+        flex-direction: column;
+        margin-top: 10px;
+        padding: 10px 10px 20px;
+        border-radius: 10px 0px 0px 10px;
+        height: 100%;
+        background-color: #eef2f6;
+        border: 1px solid #d7dfe4;
+    }
+
+    .panel-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: baseline;
+        padding: 0px 0px 6px 0px;
+        border-bottom: 1px solid #cad3da;
+        margin-bottom: 10px;
+
+        .panel-icon {
+            color: #434d5e;
+            height: 20px;
+            margin: 0px;
+        }
+
+        h2 {
+            font-size: 1rem;
+            font-weight: 600;
+            color: #2c3648;
+            margin-bottom: 0px;
+        }
+
+        .collapse-panel {
+            box-sizing: border-box !important;
+            display: flex;
+            justify-content: center;
+            width: 20px;
+            height: 20px;
+            background-color: #f5f5f5;
+            border: 1px solid #cad3da;
+            border-radius: 100%;
+            padding: 3px;
+            svg {
+                margin: auto;
+                color: #4d565c;
+            }
+        }
+    }
+
+    .content {
+        display: flex;
+        flex: 1;
+        flex-direction: column;
+        justify-content: flex-start;
+        padding: 0px;
+        overflow-y: auto;
+
+        .panel-section {
+            box-sizing: border-box !important;
+            display: flex;
+            flex: 1;
+            flex-direction: column;
+            justify-content: flex-start;
+            background-color: #ffffff;
+            /* border: 1px solid #CAD3DA; */
+            border-radius: 8px;
+            overflow: hidden;
+            margin-bottom: 16px;
+
+            .section-header {
+                display: flex;
+                justify-content: space-between;
+                background-color: #202f48;
+                padding: 10px;
+                border: none;
+
+                h3 {
+                    font-weight: 600;
+                    color: white;
+                    font-size: 0.875rem;
+                    margin: 0px;
+                }
+
+                .section-toggle {
+                    display: flex;
+                    justify-content: center;
+                    padding: 0px;
+                    height: 12px;
+                    width: 12px;
+                    border: none;
+                    background-color: transparent;
+                    margin: auto 0px;
+
+                    svg {
+                        margin: auto;
+                        color: white;
+                    }
+                }
+            }
+            .callout {
+                padding: 4px;
+                border-bottom: 1px solid #e0e6eb;
+
+                .content {
+                    display: flex;
+                    flex-direction: row;
+                    justify-content: center;
+                    background-color: #e9edf2;
+                    padding: 5px 8px;
+                    border-radius: 5px;
+
+                    svg {
+                        margin: auto 8px auto 0px;
+                        color: #464e55;
+                        height: 10px;
+                        width: 10px;
+                    }
+                    span {
+                        color: #464e55;
+                        font-size: 0.625rem;
+                    }
+                }
+            }
+
+            .section:focus-visible,
+            .section:focus {
+                outline-offset: -1px;
+            }
+            .section-body {
+                display: flex;
+                flex-direction: column;
+                flex: 1;
+                box-sizing: border-box !important;
+                overflow-y: scroll;
+                padding: 0px 8px;
+                font-size: 0.75rem;
+                border: solid #cad3da;
+                border-width: 0px 1px 1px 1px;
+                border-radius: 0px 0px 8px 8px;
+
+                .data-list {
+                    overflow-x: hidden;
+                    padding: 0px;
+                    margin-bottom: 0px;
+
+                    .data-row {
+                        box-sizing: border-box !important;
+                        display: flex;
+                        justify-content: flex-start;
+                        padding: 8px 0px;
+                        border-bottom: 1px solid #e0e6eb;
+
+                        .data-label {
+                            flex: 3;
+                            color: #565961;
+                            font-weight: 600;
+                        }
+
+                        .data-value {
+                            flex: 2;
+                            color: #000000;
+                        }
+                    }
+
+                    .data-row:last-of-type {
+                        border-bottom: none;
+                    }
+
+                    .data-row.clickable:hover {
+                        cursor: pointer;
+                        font-weight: 600;
+                    }
+                }
+            }
+        }
+
+        /* Style individual sections */
+        .panel-section.summary {
+            flex: 3;
+
+            .section-body {
+                .callout {
+                    padding: 5px 0px;
+                    .content {
+                        padding: 4px 12px;
+                        display: flex;
+                        background-color: #ffefdb;
+                        border: 1px solid #f6e4cd;
+                        border-radius: 10px;
+
+                        span {
+                            font-size: 0.75rem;
+                            color: #502d07;
+                            margin: auto;
+                            text-align: center;
+                        }
+                    }
+                }
+            }
+        }
+        .panel-section.variants {
+            flex: 2;
+            .section-body {
+                overflow-y: hidden;
+                padding: 0px;
+
+                .data-list {
+                    overflow-y: scroll;
+                    scrollbar-width: thin;
+                    .data-row {
+                        padding: 8px;
+                    }
+                    .data-row:nth-of-type(even) {
+                        background-color: #f5f5f5;
+                    }
+                }
+            }
+        }
+        .panel-section.signatures {
+            flex: 4;
+
+            .callout.hrdetect {
+                display: flex;
+                justify-content: space-between;
+                padding: 10px;
+                border: solid #cad3da;
+                border-width: 0px 1px;
+
+                .label {
+                    flex: 1;
+                    color: #565961;
+                    font-size: 0.75rem;
+                    font-weight: 500;
+                }
+
+                .value {
+                    flex: 1;
+                    color: #000000;
+                    font-size: 0.75rem;
+                    font-weight: 500;
+
+                    .circle-icon {
+                        width: 8px;
+                        height: 8px;
+                    }
+                    .circle-icon.positive {
+                        color: #1d9819;
+                    }
+                    .circle-icon.negative {
+                        color: lightgray;
+                    }
+
+                    span {
+                        margin-left: 5px;
+                    }
+                }
+            }
+
+            .section-body {
+                padding: 0px;
+                overflow: hidden;
+
+                .data-list {
+                    .data-row:nth-of-type(even) {
+                        background-color: #f5f5f5;
+                    }
+
+                    .data-row {
+                        display: inline-block;
+                        width: 100%;
+                        padding: 10px 8px;
+
+                        .data-label {
+                            display: inline;
+                            flex: none;
+                            color: #000000;
+                            font-weight: 600;
+                            margin-right: 0.25rem;
+                        }
+                        .data-value {
+                        }
+                    }
+                }
+            }
+        }
+
+        /* Expanded and collapsed */
+        .panel-section.expanded {
+            max-height: fit-content;
+            .section-header {
+                .section-toggle {
+                    svg {
+                        transform: rotate(180deg);
+                    }
+                }
+            }
+        }
+        .panel-section.collapsed {
+            flex: none;
+            max-height: none;
+            .section-body {
+                flex: none;
+                padding: 0px;
+                height: 0px;
+                border: none;
+            }
+
+            .callout.hrdetect {
+                display: none;
+            }
+
+            .section-header {
+                .section-toggle {
+                    svg {
+                        transform: none;
+                    }
+                }
+            }
+        }
+
+        /* Styles for toggle-able rows */
+        .dropdown-row {
+            display: flex;
+            flex-direction: column;
+            overflow: scroll;
+
+            .header {
+                box-sizing: border-box !important;
+                display: flex;
+                width: 100%;
+                justify-content: space-between;
+                background-color: #e0e6eb;
+                padding: 10px;
+                border: 1px solid #cad3da;
+                border-width: 1px 0px;
+
+                h4 {
+                    font-weight: 600;
+                    color: #2c3648;
+                    font-size: 0.75rem;
+                    margin: 0px;
+                }
+
+                .toggle {
+                    display: flex;
+                    justify-content: center;
+                    padding: 0px;
+                    height: 12px;
+                    width: 12px;
+                    border: none;
+                    background-color: transparent;
+                    margin: auto 0px;
+
+                    svg {
+                        margin: auto;
+                        color: #55606b;
+                    }
+                }
+            }
+            .header:hover {
+                background-color: #d5dce2;
+            }
+
+            .body {
+                overflow: scroll;
+            }
+        }
+        .dropdown-row.expanded {
+            flex: 1;
+            max-height: fit-content;
+
+            .header {
+                .toggle {
+                    svg {
+                        transform: rotate(180deg);
+                    }
+                }
+            }
+            .body {
+                flex: 1;
+            }
+        }
+        .dropdown-row.collapsed {
+            flex: none;
+            max-height: none;
+
+            .header {
+                .toggle {
+                    border-bottom: 0px;
+                    svg {
+                        transform: none;
+                    }
+                }
+            }
+            .callout {
+                display: none;
+            }
+            .body {
+                height: 0px;
+            }
+        }
+        .dropdown-row.disabled {
+            .header {
+                background-color: #f5f5f5;
+                pointer-events: none;
+                border-bottom: none;
+                h4 {
+                    color: gray;
+                }
+                .toggle {
+                    svg {
+                        transform: none;
+                        color: gray;
+                    }
+                }
+            }
+        }
+    }
+}
+
+.clinical-panel-container.open {
+    box-sizing: border-box !important;
+    position: fixed;
+    top: 50px;
+    right: 0px;
+    width: 250px;
+    height: calc(100% - 50px);
+    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSc1JyBoZWlnaHQ9JzUnPgo8cmVjdCB3aWR0aD0nNScgaGVpZ2h0PSc1JyBmaWxsPScjZmZmJy8+CjxyZWN0IHdpZHRoPScxJyBoZWlnaHQ9JzEnIGZpbGw9JyNjY2MnLz4KPC9zdmc+);
+    background-position-x: -1px;
+}
+.clinical-panel-container.closed {
+    width: 45px;
+
+    .clinical-panel {
+        width: 100%;
+    }
+
+    .panel-header {
+        flex-direction: column-reverse;
+        justify-content: center;
+        align-items: center;
+        gap: 8px;
+        border: none;
+
+        h2 {
+            display: none;
+        }
+
+        .collapse-panel {
+            svg {
+                transform: rotate(180deg);
+            }
+        }
+    }
+
+    .panel-section {
+        display: none;
+    }
+}
+
+.clinical-panel-container.closed.disabled {
+    .clinical-panel {
+        background-color: #f5f5f5;
+
+        .panel-header {
+            .panel-icon {
+                color: gray;
+            }
+
+            .collapse-panel {
+                display: none;
+            }
+        }
+    }
+}
diff --git a/src/data/samples.ts b/src/data/samples.ts
index 3b154694..7a22002f 100644
--- a/src/data/samples.ts
+++ b/src/data/samples.ts
@@ -1,5 +1,5 @@
 import { Assembly } from 'gosling.js/dist/src/gosling-schema';
-import { DataRowProps } from '../ui/ClinicalPanel';
+import { ClinicalInfo } from '../ui/ClinicalPanel';
 
 import _7a921087 from '../script/img/7a921087-8e62-4a93-a757-fd8cdbe1eb8f.jpeg';
 import _84ca6ab0 from '../script/img/84ca6ab0-9edc-4636-9d27-55cdba334d7d.jpeg';
@@ -33,7 +33,7 @@ export type SampleType = {
     cnFields?: [string, string, string];
     thumbnail?: string;
     note?: string;
-    clinicalInfo?: { [key: string]: DataRowProps[] };
+    clinicalInfo?: ClinicalInfo;
 };
 
 // const samples: SampleType[] = (pcawg as SampleType[]).map(d => { return { group: 'default', ...d }});
diff --git a/src/ui/ClinicalPanel/index.tsx b/src/ui/ClinicalPanel/index.tsx
index 74f385e4..5a1daf6c 100644
--- a/src/ui/ClinicalPanel/index.tsx
+++ b/src/ui/ClinicalPanel/index.tsx
@@ -15,12 +15,42 @@ export type DataRowProps = {
     handleClick?: () => void;
 };
 
+export type ClinicalInfo = {
+    summary: SummaryItem[];
+    variants: VariantItem[];
+    signatures: SignatureItem[];
+};
+
+export type SummaryItem = {
+    label: string;
+    value: string;
+};
+
+export type VariantItem = {
+    gene: string;
+    type?: string; // if we know all the possible types, we can narrow down further, i.e., type: "Germline" | "homozygous loss" | ...;
+    cDNA?: string;
+    chr: string;
+    start: string | number;
+    end: string | number;
+    position: string | number;
+    handleClick?: () => void;
+};
+
+export type SignatureItem = {
+    type: string; // if we know all the possible types, we can narrow down further, i.e., type: "indels" | "point_mutations" | ...;
+    count: string | number;
+    label: string;
+    hrDetect: boolean;
+};
+
 // Data row with label and value
 const DataRow = ({ handleClick, label, value }: DataRowProps) => {
-    // Format label to be capitalized
-    let capitalizedLabel: string;
-    if (label) {
-        capitalizedLabel = label.charAt(0).toUpperCase() + label.slice(1);
+    let formattedLabel = label;
+
+    // Format label to be capitalized if string
+    if (label && typeof label === 'string') {
+        formattedLabel = label.charAt(0).toUpperCase() + label.slice(1);
     }
 
     return (
@@ -29,7 +59,7 @@ const DataRow = ({ handleClick, label, value }: DataRowProps) => {
             onClick={handleClick ? () => handleClick() : null}
             role={handleClick ? 'button' : ''}
         >
-            {label ? <span className="data-label">{capitalizedLabel}</span> : null}
+            {label ? <span className="data-label">{formattedLabel}</span> : null}
             <span className="data-value">{value}</span>
         </li>
     );
@@ -240,7 +270,7 @@ export const ClinicalPanel = ({
     setInteractiveMode,
     setIsClinicalPanelOpen
 }: ClinicalPanelProps) => {
-    const [clinicalInformation, setClinicalInformation] = useState(null);
+    const { clinicalInfo: clinicalInformation } = demo;
 
     const handleZoomToGene = (gene: string) => {
         setInteractiveMode(true);
@@ -256,12 +286,6 @@ export const ClinicalPanel = ({
         gosRef.current.api.zoomToGene(`${demo.id}-mid-ideogram`, `${gene}`, 1000);
     };
 
-    useEffect(() => {
-        if (hasClinicalInfo && demo?.clinicalInfo) {
-            setClinicalInformation(demo.clinicalInfo);
-        }
-    }, [demo]);
-
     return (
         <div
             className={`clinical-panel-container ${isClinicalPanelOpen ? 'open' : 'closed'} ${