diff --git a/frontend-interface/app/globals.css b/frontend-interface/app/globals.css
index 0ecb1a6d..79596607 100644
--- a/frontend-interface/app/globals.css
+++ b/frontend-interface/app/globals.css
@@ -1,47 +1,130 @@
 :root {
-  --background: #f8f9fa;
-  --foreground: #212529;
-  --primary: #0d6efd;
-  --secondary: #6c757d;
-  --accent: #4361ee;
-  --success: #198754;
-  --error: #dc3545;
-}
+  /* Core colors */
+  --background-dark: #000000;
+  --neon-green: #00ff41;
+  --neon-blue: #0ff0fc;
+  --neon-purple: #b026ff;
+  --foreground: #ffffff;
 
-@media (prefers-color-scheme: dark) {
-  :root {
-    --background: #0a0a0a;
-    --foreground: #ededed;
-  }
-}
+  /* Glow effects */
+  --green-glow: 0 0 10px rgba(0, 255, 65, 0.5),
+    0 0 20px rgba(0, 255, 65, 0.3),
+    0 0 30px rgba(0, 255, 65, 0.1);
+  --blue-glow: 0 0 10px rgba(15, 240, 252, 0.5),
+    0 0 20px rgba(15, 240, 252, 0.3),
+    0 0 30px rgba(15, 240, 252, 0.1);
 
-html,
-body {
-  max-width: 100vw;
-  overflow-x: hidden;
+  /* Component backgrounds */
+  --surface-dark: rgba(0, 255, 65, 0.05);
+  --border-glow: rgba(0, 255, 65, 0.3);
 }
 
+/* Base styles */
 body {
+  background-color: var(--background-dark);
   color: var(--foreground);
-  background: var(--background);
-  font-family: Arial, Helvetica, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
+  font-family: var(--font-share-tech-mono);
+}
+
+/* Main container styles */
+.page {
+  min-height: 100vh;
+  background-color: var(--background-dark);
+  background-image:
+    radial-gradient(circle at 50% 50%, rgba(0, 255, 65, 0.1) 0%, transparent 50%),
+    linear-gradient(0deg, rgba(0, 0, 0, 0.9) 0%, transparent 100%);
+}
+
+/* Component styles */
+.component {
+  background: var(--surface-dark);
+  border: 1px solid var(--neon-green);
+  box-shadow: var(--green-glow);
+  border-radius: 8px;
+  padding: 1rem;
+  transition: all 0.3s ease;
+}
+
+.component:hover {
+  box-shadow: 0 0 15px rgba(0, 255, 65, 0.7),
+    0 0 30px rgba(0, 255, 65, 0.5),
+    0 0 45px rgba(0, 255, 65, 0.3);
+}
+
+/* Button styles */
+button {
+  background: var(--surface-dark);
+  color: var(--neon-green);
+  border: 1px solid var(--neon-green);
+  padding: 0.5rem 1rem;
+  border-radius: 4px;
+  cursor: pointer;
+  font-family: var(--font-share-tech-mono);
+  box-shadow: var(--green-glow);
+  transition: all 0.3s ease;
 }
 
-* {
-  box-sizing: border-box;
-  padding: 0;
-  margin: 0;
+button:hover {
+  background: rgba(0, 255, 65, 0.1);
+  box-shadow: 0 0 15px rgba(0, 255, 65, 0.7),
+    0 0 30px rgba(0, 255, 65, 0.5);
+  transform: translateY(-2px);
 }
 
-a {
-  color: inherit;
-  text-decoration: none;
+button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
 }
 
-@media (prefers-color-scheme: dark) {
-  html {
-    color-scheme: dark;
-  }
+/* Quantum circuit grid */
+.circuit-grid {
+  background: var(--surface-dark);
+  border: 2px solid var(--neon-green);
+  box-shadow: var(--green-glow);
+  padding: 20px;
+  border-radius: 8px;
 }
+
+/* Wire lines */
+.wire-line {
+  height: 2px;
+  background: var(--neon-green);
+  box-shadow: var(--green-glow);
+}
+
+/* Gate styles */
+.quantum-gate {
+  background: var(--surface-dark);
+  border: 1px solid var(--neon-green);
+  box-shadow: var(--green-glow);
+  transition: all 0.3s ease;
+}
+
+.quantum-gate--blue {
+  border-color: var(--neon-blue);
+  box-shadow: var(--blue-glow);
+}
+
+.quantum-gate:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 0 15px rgba(0, 255, 65, 0.7),
+    0 0 30px rgba(0, 255, 65, 0.5);
+}
+
+/* Headings */
+h1,
+h2,
+h3 {
+  color: var(--neon-green);
+  text-shadow: 0 0 10px rgba(0, 255, 65, 0.5);
+  font-family: var(--font-share-tech-mono);
+}
+
+/* Control panel */
+.control-panel {
+  background: var(--surface-dark);
+  border: 1px solid var(--neon-green);
+  box-shadow: var(--green-glow);
+  border-radius: 8px;
+  padding: 1rem;
+}
\ No newline at end of file
diff --git a/frontend-interface/app/layout.js b/frontend-interface/app/layout.js
index 08210cca..efe5281e 100644
--- a/frontend-interface/app/layout.js
+++ b/frontend-interface/app/layout.js
@@ -1,28 +1,40 @@
 import localFont from "next/font/local";
+import { Share_Tech_Mono } from 'next/font/google';
 import "./globals.css";
 
+// Local fonts
 const geistSans = localFont({
   src: "./fonts/GeistVF.woff",
   variable: "--font-geist-sans",
   weight: "100 900",
 });
+
 const geistMono = localFont({
   src: "./fonts/GeistMonoVF.woff",
   variable: "--font-geist-mono",
   weight: "100 900",
 });
 
+// Google font
+const shareTechMono = Share_Tech_Mono({
+  weight: '400',
+  subsets: ['latin'],
+  variable: '--font-share-tech-mono', // Add this to use it as a CSS variable
+});
+
 export const metadata = {
-  title: "Create Next App",
-  description: "Generated by create next app",
+  title: "Quantum Circuit Simulator",
+  description: "Design and simulate quantum circuits in a noisy intermediate-scale quantum environment",
 };
 
 export default function RootLayout({ children }) {
   return (
     <html lang="en">
-      <body className={`${geistSans.variable} ${geistMono.variable}`}>
+      <body
+        className={`${geistSans.variable} ${geistMono.variable} ${shareTechMono.variable}`}
+      >
         {children}
       </body>
     </html>
   );
-}
+}
\ No newline at end of file
diff --git a/frontend-interface/app/page.module.css b/frontend-interface/app/page.module.css
index 5b94145f..442d6196 100644
--- a/frontend-interface/app/page.module.css
+++ b/frontend-interface/app/page.module.css
@@ -1,13 +1,4 @@
 .page {
-  --gray-rgb: 0, 0, 0;
-  --gray-alpha-200: rgba(var(--gray-rgb), 0.08);
-  --gray-alpha-100: rgba(var(--gray-rgb), 0.05);
-  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05);
-  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
-  --button-primary-hover: #383838;
-  --button-secondary-hover: #f2f2f2;
-  --transition-base: 0.3s ease;
-
   display: grid;
   grid-template-rows: 20px 1fr 20px;
   align-items: center;
@@ -15,19 +6,23 @@
   min-height: 100svh;
   padding: 80px;
   gap: 64px;
-  font-family: var(--font-geist-sans);
-  background: linear-gradient(to bottom right, rgba(255,255,255,0.01), rgba(255,255,255,0.05));
+  font-family: 'Share Tech Mono', monospace;
+  position: relative;
 }
 
-@media (prefers-color-scheme: dark) {
-  .page {
-    --gray-rgb: 255, 255, 255;
-    --gray-alpha-200: rgba(var(--gray-rgb), 0.145);
-    --gray-alpha-100: rgba(var(--gray-rgb), 0.06);
-    --button-primary-hover: #ccc;
-    --button-secondary-hover: #1a1a1a;
-    background: linear-gradient(to bottom right, rgba(0,0,0,0.3), rgba(0,0,0,0.1));
-  }
+.page::before {
+  content: '';
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background:
+    linear-gradient(45deg, transparent 48%, var(--neon-green) 49%, transparent 51%),
+    linear-gradient(-45deg, transparent 48%, var(--neon-green) 49%, transparent 51%);
+  background-size: 60px 60px;
+  opacity: 0.1;
+  pointer-events: none;
 }
 
 .main {
@@ -40,22 +35,25 @@
   backdrop-filter: blur(10px);
   padding: 24px;
   border-radius: 16px;
-  box-shadow: var(--shadow-sm);
+  background: rgba(0, 255, 65, 0.05);
+  border: 1px solid var(--neon-green);
+  box-shadow: 0 0 20px var(--glow-green);
 }
 
 .main ol {
-  font-family: var(--font-geist-mono);
+  font-family: 'Share Tech Mono', monospace;
   padding-left: 0;
   margin: 0;
   font-size: 14px;
   line-height: 24px;
-  letter-spacing: -0.01em;
   list-style-position: inside;
   counter-reset: item;
 }
 
 .main li {
-  transition: transform var(--transition-base);
+  transition: transform 0.3s ease;
+  color: var(--neon-green);
+  text-shadow: 0 0 5px var(--glow-green);
 }
 
 .main li:hover {
@@ -65,20 +63,23 @@
 .main li:not(:last-of-type) {
   margin-bottom: 12px;
   padding-bottom: 12px;
-  border-bottom: 1px solid var(--gray-alpha-100);
+  border-bottom: 1px solid rgba(0, 255, 65, 0.2);
 }
 
 .main code {
   font-family: inherit;
-  background: var(--gray-alpha-100);
+  background: rgba(0, 255, 65, 0.1);
   padding: 4px 8px;
   border-radius: 6px;
   font-weight: 600;
-  transition: background var(--transition-base);
+  color: var(--neon-green);
+  border: 1px solid rgba(0, 255, 65, 0.2);
+  transition: all 0.3s ease;
 }
 
 .main code:hover {
-  background: var(--gray-alpha-200);
+  background: rgba(0, 255, 65, 0.2);
+  box-shadow: 0 0 10px var(--glow-green);
 }
 
 .ctas {
@@ -92,8 +93,8 @@
   border-radius: 12px;
   height: 48px;
   padding: 0 24px;
-  border: 1px solid transparent;
-  transition: all var(--transition-base);
+  border: 1px solid var(--neon-green);
+  transition: all 0.3s ease;
   cursor: pointer;
   display: flex;
   align-items: center;
@@ -101,33 +102,9 @@
   font-size: 16px;
   line-height: 20px;
   font-weight: 500;
-  box-shadow: var(--shadow-sm);
-}
-
-a.primary {
-  background: var(--foreground);
-  color: var(--background);
-  gap: 8px;
-  position: relative;
-  overflow: hidden;
-}
-
-a.primary::after {
-  content: '';
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background: linear-gradient(45deg, transparent, rgba(255,255,255,0.1), transparent);
-  transform: translateX(-100%);
-  transition: transform 0.5s;
-}
-
-a.secondary {
-  border-color: var(--gray-alpha-200);
-  min-width: 180px;
-  backdrop-filter: blur(5px);
+  text-transform: uppercase;
+  letter-spacing: 1px;
+  box-shadow: 0 0 15px var(--glow-green);
 }
 
 .footer {
@@ -136,53 +113,9 @@ a.secondary {
   gap: 24px;
   padding: 16px;
   border-radius: 12px;
-  background: var(--gray-alpha-100);
-}
-
-.footer a {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  transition: transform var(--transition-base);
-}
-
-.footer a:hover {
-  transform: translateY(-2px);
-}
-
-.footer img {
-  flex-shrink: 0;
-  transition: transform var(--transition-base);
-}
-
-.footer:hover img {
-  transform: scale(1.1);
-}
-
-/* Enable hover only on non-touch devices */
-@media (hover: hover) and (pointer: fine) {
-  a.primary:hover {
-    background: var(--button-primary-hover);
-    border-color: transparent;
-    transform: translateY(-2px);
-    box-shadow: var(--shadow-md);
-  }
-
-  a.primary:hover::after {
-    transform: translateX(100%);
-  }
-
-  a.secondary:hover {
-    background: var(--button-secondary-hover);
-    border-color: transparent;
-    transform: translateY(-2px);
-    box-shadow: var(--shadow-md);
-  }
-
-  .footer a:hover {
-    text-decoration: underline;
-    text-underline-offset: 4px;
-  }
+  background: rgba(0, 255, 65, 0.05);
+  border: 1px solid var(--neon-green);
+  box-shadow: 0 0 15px var(--glow-green);
 }
 
 @media (max-width: 600px) {
@@ -192,40 +125,6 @@ a.secondary {
   }
 
   .main {
-    align-items: center;
     padding: 16px;
   }
-
-  .main ol {
-    text-align: center;
-  }
-
-  .ctas {
-    flex-direction: column;
-    width: 100%;
-  }
-
-  .ctas a {
-    font-size: 14px;
-    height: 40px;
-    padding: 0 16px;
-    width: 100%;
-  }
-
-  a.secondary {
-    min-width: auto;
-  }
-
-  .footer {
-    flex-wrap: wrap;
-    align-items: center;
-    justify-content: center;
-    padding: 12px;
-  }
-}
-
-@media (prefers-color-scheme: dark) {
-  .logo {
-    filter: invert();
-  }
-}
+}
\ No newline at end of file
diff --git a/visualizations/__pycache__/Density_Plot.cpython-39.pyc b/visualizations/__pycache__/Density_Plot.cpython-39.pyc
new file mode 100644
index 00000000..661e36b2
Binary files /dev/null and b/visualizations/__pycache__/Density_Plot.cpython-39.pyc differ
diff --git a/visualizations/__pycache__/__init__.cpython-39.pyc b/visualizations/__pycache__/__init__.cpython-39.pyc
new file mode 100644
index 00000000..d0b1b180
Binary files /dev/null and b/visualizations/__pycache__/__init__.cpython-39.pyc differ