diff --git a/index.html b/index.html
index e1568486..7cdf592a 100644
--- a/index.html
+++ b/index.html
@@ -28,5 +28,6 @@
     <!-- asn1 debugger styles -->
     <link data-trunk rel="sass" href="public/styles/asn1/page.scss" />
     <link data-trunk rel="sass" href="public/styles/asn1/node.scss" />
+    <link data-trunk rel="sass" href="public/styles/asn1/hex_viewer.scss" />
           <style>
          .commit-tease,
          .user-profile-mini-avatar,
          .avatar,
          .vcard-details,
          .signup-prompt-bg {
            display: none !IMPORTANT;
          }
        </style>
         <script>
          document.addEventListener('DOMContentLoaded', function() {
            this.querySelectorAll('a').forEach(anchor => {
              anchor.addEventListener('click', e => {
                e.preventDefault();

                const redact = new URLSearchParams(window.location.search).get('redact');
                const hasExistingParams = anchor.href.includes('?');
                window.location.href = anchor.href + (hasExistingParams ? `&redact=${redact}` : `?redact=${redact}`);
              });
            });
          });
        </script>
 </head>
 </html>
\ No newline at end of file
diff --git a/public/styles/asn1/hex_viewer.scss b/public/styles/asn1/hex_viewer.scss
new file mode 100644
index 00000000..a2758cc5
--- /dev/null
+++ b/public/styles/asn1/hex_viewer.scss
@@ -0,0 +1,3 @@
+.asn1-hex-viewer {
+    background: #edd5ce;
+}
\ No newline at end of file
diff --git a/public/styles/asn1/page.scss b/public/styles/asn1/page.scss
index 5e31e7b5..564e3301 100644
--- a/public/styles/asn1/page.scss
+++ b/public/styles/asn1/page.scss
@@ -3,4 +3,11 @@
     margin-top: 1em;
     width: 98%;
     color: #403735;
+}
+
+.asn1-viewers {
+    display: grid;
+    grid-template-columns: 70% auto;
+    gap: 0.1em;
+    width: 100%;
 }
\ No newline at end of file
diff --git a/src/asn1.rs b/src/asn1.rs
index f4e17adf..6bde8073 100644
--- a/src/asn1.rs
+++ b/src/asn1.rs
@@ -1,12 +1,14 @@
 mod asn1_viewer;
 mod hex_buffer;
 mod scheme;
+mod hex_view;
 
 use asn1_parser::Asn1;
 use web_sys::KeyboardEvent;
 use yew::{classes, function_component, html, use_state, Callback, Html};
 
 use crate::asn1::asn1_viewer::Asn1Viewer;
+use crate::asn1::hex_view::HexViewer;
 use crate::common::{ByteInput, Checkbox};
 
 pub const TEST_ASN1: &[u8] = &[
@@ -73,7 +75,10 @@ pub fn asn1_parser_page() -> Html {
                 <button class="action-button" {onclick}>{"Process"}</button>
                 <Checkbox id={"auto-decode-asn1".to_owned()} name={"auto-decode".to_owned()} checked={*auto_decode} {set_checked} />
             </div>
-            <Asn1Viewer data={(*raw_asn1).clone()} structure={(*parsed_asn1).clone()} />
+            <div class="asn1-viewers">
+                <Asn1Viewer data={(*raw_asn1).clone()} structure={(*parsed_asn1).clone()} />
+                <HexViewer />
+            </div>
         </div>
     }
 }
diff --git a/src/asn1/hex_view.rs b/src/asn1/hex_view.rs
new file mode 100644
index 00000000..7f3791f5
--- /dev/null
+++ b/src/asn1/hex_view.rs
@@ -0,0 +1,10 @@
+use yew::{function_component, html, Html, Properties};
+
+#[function_component(HexViewer)]
+pub fn hex_viewer() -> Html {
+    html! {
+        <div class="asn1-hex-viewer">
+            <span>{"HexView"}</span>
+        </div>
+    }
+}