example

src/App/App.tsx

@@ -20,8 +20,6 @@ import { stringToSlug } from "../utils/stringToSlug.ts";
 import { Villbuttonrow } from "../components/Buttons.tsx";
 import "../utils/Highlight-functions.js";
 import "./LoadingScreen.css";
-import FanzorViewer from '../components/Fanzorviewer.tsx';
-
 
 
 const App = () => {
@@ -64,10 +62,7 @@ const App = () => {
       {/* Navigation */}
       <Navbar />
       {/* Embed the viewer */}
-      <div className="container">
-            <h1>Protein Structure Viewer</h1>
-            <FanzorViewer />
-          </div>
+      
 
       {/* Header and PageContent */}
       <Routes>

src/contents/example.tsx

@@ -9,6 +9,8 @@ import SimpleSlider from "../components/Slider";
 import React from 'react';
 import { Bar, Doughnut, PolarArea } from 'react-chartjs-2';
 import { Chart as ChartJS, Tooltip, Legend, BarElement, CategoryScale, LinearScale, Title, RadialLinearScale } from 'chart.js';
+import FanzorViewer from '../components/Fanzorviewer.tsx';
+
 
 ChartJS.register(
     CategoryScale,
@@ -23,6 +25,10 @@ ChartJS.register(
 export function Example() {
     return (
       <>
+       <div className="container">
+            <h1>Protein Structure Viewer</h1>
+            <FanzorViewer />
+          </div>
       <h1> Here you can see what we can use</h1>
       <h2>Collapisbles</h2>
       <div className="row">