diff --git a/crystal_toolkit/components/phonon.py b/crystal_toolkit/components/phonon.py
index 5ef76d90..7a3ed5f5 100644
--- a/crystal_toolkit/components/phonon.py
+++ b/crystal_toolkit/components/phonon.py
@@ -37,6 +37,7 @@
 MAX_MAGNITUDE = 300
 MIN_MAGNITUDE = 0
 
+
 # TODOs:
 # - look for additional projection methods in phonon DOS (currently only atom
 #   projections supported)
@@ -80,11 +81,16 @@ def _sub_layouts(self) -> dict[str, Component]:
 
         fig = PhononBandstructureAndDosComponent.get_figure(None, None)
         # Main plot
-        graph = dcc.Graph(
-            figure=fig,
-            config={"displayModeBar": False},
-            responsive=False,
-            id=self.id("ph-bsdos-graph"),
+        graph = html.Div(
+            [
+                dcc.Graph(
+                    figure=fig,
+                    config={"displayModeBar": False},
+                    responsive=True,
+                    id=self.id("ph-bsdos-graph"),
+                    style={"height": "520px"},
+                )
+            ]
         )
 
         # Brillouin zone
@@ -153,12 +159,24 @@ def _sub_layouts(self) -> dict[str, Component]:
         summary_dict = self._get_data_list_dict(None, None)
         summary_table = get_data_list(summary_dict)
 
-        # crystal visualization
-
-        tip = html.H5(
-            "💡 Tips: Click different q-points and bands in the dispersion diagram to see the crystal vibration!",
+        tip = html.Div(
+            html.Span(
+                "💡 Tips: Click different q-points and bands in the dispersion diagram to see the crystal vibration!",
+                style={
+                    "border": "0.5px dashed black",
+                    "display": "inline-flex",
+                    "alignItems": "center",
+                    "justifyContent": "center",
+                    "textAlign": "center",
+                },
+            ),
+            style={
+                "display": "flex",
+                "justifyContent": "center",
+            },
         )
 
+        # crystal visualization
         crystal_animation = html.Div(
             CrystalToolkitAnimationScene(
                 data={},
@@ -167,16 +185,16 @@ def _sub_layouts(self) -> dict[str, Component]:
                 settings={"defaultZoom": 1.2},
                 axisView="SW",
                 showControls=False,  # disable download for now
-            ),
-            style={"width": "60%"},
+            )
         )
 
         crystal_animation_controls = html.Div(
             [
                 html.Br(),
-                html.Div(tip, style={"textAlign": "center"}),
+                html.Br(),
                 html.Br(),
                 html.H5("Control Panel", style={"textAlign": "center"}),
+                html.Br(),
                 html.H6("Supercell modification"),
                 html.Br(),
                 html.Div(
@@ -184,6 +202,7 @@ def _sub_layouts(self) -> dict[str, Component]:
                         self.get_numerical_input(
                             kwarg_label="scale-x",
                             default=1,
+                            persistence_type="session",
                             is_int=True,
                             label="x",
                             min=1,
@@ -192,6 +211,7 @@ def _sub_layouts(self) -> dict[str, Component]:
                         self.get_numerical_input(
                             kwarg_label="scale-y",
                             default=1,
+                            persistence_type="session",
                             is_int=True,
                             label="y",
                             min=1,
@@ -200,15 +220,19 @@ def _sub_layouts(self) -> dict[str, Component]:
                         self.get_numerical_input(
                             kwarg_label="scale-z",
                             default=1,
+                            persistence_type="session",
                             is_int=True,
                             label="z",
                             min=1,
                             style={"width": "5rem"},
                         ),
-                        html.Button(
-                            "Update",
-                            id=self.id("supercell-controls-btn"),
-                            style={"height": "40px"},
+                        html.Div(
+                            html.Button(
+                                "Update",
+                                id=self.id("supercell-controls-btn"),
+                                style={"height": "40px"},
+                            ),
+                            style={"textAlign": "center", "width": "100%"},
                         ),
                     ],
                     style={"display": "flex"},
@@ -224,6 +248,7 @@ def _sub_layouts(self) -> dict[str, Component]:
                     )
                 ),
             ],
+            style={"width": "100%"},
         )
 
         return {
@@ -244,15 +269,16 @@ def _get_animation_panel(self):
             [
                 Column(
                     [
+                        sub_layouts["tip"],
                         Columns(
                             [
                                 sub_layouts["crystal-animation"],
                                 sub_layouts["crystal-animation-controls"],
                             ]
-                        )
+                        ),
                     ]
                 ),
-            ]
+            ],
         )
 
     def layout(self) -> html.Div: