diff --git a/client/src/app/components/nova/OutputView.scss b/client/src/app/components/nova/OutputView.scss
index 9050a83cc..d5b23291c 100644
--- a/client/src/app/components/nova/OutputView.scss
+++ b/client/src/app/components/nova/OutputView.scss
@@ -4,6 +4,16 @@
 @import "../../../scss/fonts";
 
 .output-page {
+    .card--content__account {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+
+        @include phone-down {
+            flex-direction: column;
+        }
+    }
+
     .card--content__output {
         padding: 0 30px;
         margin-bottom: 20px;
@@ -15,10 +25,14 @@
         .card--value.card-header--wrapper {
             width: 100%;
             display: flex;
-            margin-bottom: 0px;
+            margin-bottom: 0;
             height: 32px;
             align-items: center;
 
+            @include tablet-down {
+                height: auto;
+            }
+
             .output-header {
                 display: flex;
                 width: 100%;
@@ -33,7 +47,7 @@
                     white-space: nowrap;
 
                     a {
-                        margin-right: 0px;
+                        margin-right: 0;
                     }
 
                     .highlight {
@@ -67,6 +81,10 @@
             color: #fec900;
             font-size: 18px;
 
+            @include phone-down {
+                display: none;
+            }
+
             &.expired {
                 color: #ff4800;
             }
@@ -74,10 +92,6 @@
             @media (min-width: #{768px}) and (max-width: #{820px}) {
                 display: none;
             }
-
-            @include phone-down {
-                display: none;
-            }
         }
 
         .left-border {
@@ -113,9 +127,11 @@
 
     .tooltip .wrap {
         width: 230px !important;
+
         .arrow {
             left: 8px !important;
             margin-left: 0 !important;
+
             &--down {
                 top: 95%;
             }
@@ -125,6 +141,7 @@
     &--above {
         .tooltip .wrap {
             top: -416%;
+
             .arrow {
                 top: 94%;
             }
diff --git a/client/src/app/components/nova/OutputView.tsx b/client/src/app/components/nova/OutputView.tsx
index 3f9368c0a..82edd8268 100644
--- a/client/src/app/components/nova/OutputView.tsx
+++ b/client/src/app/components/nova/OutputView.tsx
@@ -99,42 +99,46 @@ const OutputView: React.FC<OutputViewProps> = ({ outputId, output, showCopyAmoun
             >
                 <DropdownIcon />
             </div>
-            <div className="output-header">
-                <button type="button" className="output-type--name color">
-                    {NameHelper.getOutputTypeName(output.type)}
-                </button>
-                <div className="output-id--link">
-                    (
-                    {isLinksDisabled ? (
-                        <div className="margin-r-t">
-                            <span className="highlight">{outputIdTransactionPart}</span>
-                            <span className="highlight">{outputIdIndexPart}</span>
+            <div className="card--content__account">
+                <div className="output-header">
+                    <button type="button" className="output-type--name color">
+                        {NameHelper.getOutputTypeName(output.type)}
+                    </button>
+                    <div className="output-id--link">
+                        (
+                        {isLinksDisabled ? (
+                            <div className="margin-r-t">
+                                <span className="highlight">{outputIdTransactionPart}</span>
+                                <span className="highlight">{outputIdIndexPart}</span>
+                            </div>
+                        ) : (
+                            <Link to={`/${network}/output/${outputId}`} className="margin-r-t">
+                                <span>{outputIdTransactionPart}</span>
+                                <span className="highlight">{outputIdIndexPart}</span>
+                            </Link>
+                        )}
+                        )
+                        <CopyButton copy={String(outputId)} />
+                    </div>
+                    {specialUnlockCondition}
+                </div>
+                <div className="row middle">
+                    {showCopyAmount && (
+                        <div className="card--value pointer amount-size row end">
+                            <span
+                                className="pointer"
+                                onClick={(e) => {
+                                    setIsFormattedBalance(!isFormattedBalance);
+                                    e.stopPropagation();
+                                }}
+                            >
+                                {formatAmount(output.amount, tokenInfo, !isFormattedBalance)}
+                            </span>
                         </div>
-                    ) : (
-                        <Link to={`/${network}/output/${outputId}`} className="margin-r-t">
-                            <span>{outputIdTransactionPart}</span>
-                            <span className="highlight">{outputIdIndexPart}</span>
-                        </Link>
                     )}
-                    )
-                    <CopyButton copy={String(outputId)} />
+                    {showCopyAmount && <CopyButton copy={output.amount} />}
                 </div>
-                {specialUnlockCondition}
             </div>
-            {showCopyAmount && (
-                <div className="card--value pointer amount-size row end">
-                    <span
-                        className="pointer"
-                        onClick={(e) => {
-                            setIsFormattedBalance(!isFormattedBalance);
-                            e.stopPropagation();
-                        }}
-                    >
-                        {formatAmount(output.amount, tokenInfo, !isFormattedBalance)}
-                    </span>
-                </div>
-            )}
-            {showCopyAmount && <CopyButton copy={output.amount} />}
         </div>
     );
 
diff --git a/client/src/app/routes/nova/EpochPage.scss b/client/src/app/routes/nova/EpochPage.scss
index 2622eb084..72bb0f065 100644
--- a/client/src/app/routes/nova/EpochPage.scss
+++ b/client/src/app/routes/nova/EpochPage.scss
@@ -4,9 +4,16 @@
 @import "../../../scss/variables";
 
 .epoch-page {
+    .wrapper {
+        padding: 0 20px;
+    }
     .epoch-page--header {
         display: flex;
         justify-content: space-between;
+
+        @include tablet-down {
+            flex-direction: column;
+        }
     }
 
     .validators-page__header {
diff --git a/client/src/features/visualizer-vivagraph/components/KeyPanel.scss b/client/src/features/visualizer-vivagraph/components/KeyPanel.scss
index 1c5a8c479..edc36a969 100644
--- a/client/src/features/visualizer-vivagraph/components/KeyPanel.scss
+++ b/client/src/features/visualizer-vivagraph/components/KeyPanel.scss
@@ -15,9 +15,18 @@
     pointer-events: none;
     gap: 20px;
 
+    @include tablet-down {
+        flex-direction: column;
+        gap: 8px;
+    }
+
     .card {
         background: var(--body-background);
         padding: 16px 32px;
+
+        @include tablet-down {
+            padding: 8px 16px;
+        }
     }
 
     .key-panel-list {
@@ -26,6 +35,10 @@
         flex-wrap: wrap;
         gap: 32px;
 
+        @include tablet-down {
+            gap: 8px;
+        }
+
         .key-panel-item {
             display: flex;
             flex-direction: row;
@@ -67,6 +80,23 @@
         align-items: center;
         pointer-events: none;
 
+        @include tablet-down {
+            width: 100%;
+        }
+
+        .card {
+            @include tablet-down {
+                width: 100%;
+            }
+        }
+
+        .card--label,
+        .card--value {
+            @include tablet-down {
+                height: auto;
+            }
+        }
+
         .card--label {
             justify-content: flex-start;
         }
@@ -78,6 +108,17 @@
             display: flex;
             flex-direction: column;
             align-items: center;
+
+            .card--value {
+                margin-bottom: 0;
+            }
+
+            @include tablet-down {
+                justify-content: start;
+                flex-direction: row;
+                width: 100%;
+                gap: 8px;
+            }
         }
 
         @include tablet-down {