diff --git a/web/index.html b/web/index.html
index a59a77f..3e654d6 100644
--- a/web/index.html
+++ b/web/index.html
@@ -2,9 +2,9 @@
-
+
- En2Ru Scientific Translator
+ En2Ru: Scientific Translator
diff --git a/web/src/App.css b/web/src/App.css
index e69de29..6af074e 100644
--- a/web/src/App.css
+++ b/web/src/App.css
@@ -0,0 +1,177 @@
+@import url('https://fonts.googleapis.com/css?family=Google+Sans|Noto+Sans|Castoro');
+
+.public-DraftEditor-content {
+ min-height: 12em;
+}
+
+.link-block a {
+ margin-top: 5px;
+ margin-bottom: 5px;
+}
+
+.dnerf {
+ font-variant: small-caps;
+}
+
+
+.teaser .hero-body {
+ padding-top: 0;
+ padding-bottom: 3rem;
+}
+
+.publication-title {
+}
+
+.publication-title {
+ font-family: 'Google Sans', sans-serif;
+ font-weight: 600;
+ font-size: 3em;
+}
+
+.publication-authors {
+ font-family: 'Google Sans', sans-serif;
+}
+
+.publication-venue {
+ color: #555;
+ width: fit-content;
+ font-weight: bold;
+}
+
+.publication-awards {
+ color: #ff3860;
+ width: fit-content;
+ font-weight: bolder;
+}
+
+.publication-authors {
+}
+
+.publication-authors a:hover {
+ text-decoration: underline;
+}
+
+.author-block {
+ display: inline-block;
+}
+
+
+.publication-video {
+ position: relative;
+ width: 100%;
+ height: 0;
+ padding-bottom: 56.25%;
+
+ overflow: hidden;
+ border-radius: 10px !important;
+}
+
+.publication-video iframe {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+}
+
+.publication-body img {
+}
+
+.results-carousel {
+ overflow: hidden;
+}
+
+.results-carousel .item {
+ margin: 5px;
+ overflow: hidden;
+ border: 1px solid #bbb;
+ border-radius: 10px;
+ padding: 0;
+ font-size: 0;
+}
+
+.results-carousel video {
+ margin: 0;
+}
+
+
+.interpolation-panel {
+ background: #f5f5f5;
+ border-radius: 10px;
+}
+
+.interpolation-panel .interpolation-image {
+ width: 100%;
+ border-radius: 5px;
+}
+
+.interpolation-video-column {
+}
+
+.interpolation-panel .slider {
+ margin: 0 !important;
+}
+
+.interpolation-panel .slider {
+ margin: 0 !important;
+}
+
+#interpolation-image-wrapper {
+ width: 100%;
+}
+#interpolation-image-wrapper img {
+ border-radius: 5px;
+}
+
+/* CSS for the examples */
+
+.message {
+ background-color: white;
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);
+ margin-bottom: 1rem;
+ border-radius: 4px;
+}
+
+.message-header {
+ background-color: #f5f5f5;
+ border-top-left-radius: 4px;
+ border-top-right-radius: 4px;
+ color: #333333; /* or any other darker shade you prefer */
+}
+
+
+.has-text-left pre {
+ background-color: #f5f5f5;
+ padding: 1rem;
+ border-radius: 4px;
+}
+
+.title.is-5 {
+ margin-top: 1rem;
+ margin-bottom: 0.5rem;
+ font-weight: 600; /* Increased font weight for better visibility */
+}
+
+#acronym_content {
+ padding: 1.5rem;
+}
+
+.block:not(:last-child) {
+ margin-bottom: 1.5rem;
+}
+
+
+code.python {
+ display: block;
+ background-color: #f4f4f4;
+ border: 1px solid #ddd;
+ border-radius: 5px;
+ font-size: 14px;
+ line-height: 1.5;
+ overflow-x: auto;
+ padding: 20px;
+}
+
+code.python {
+ color: #008000;
+}
diff --git a/web/src/components/TranslationModule.tsx b/web/src/components/TranslationModule.tsx
index 300babf..6c04ba7 100644
--- a/web/src/components/TranslationModule.tsx
+++ b/web/src/components/TranslationModule.tsx
@@ -46,7 +46,7 @@ export default function TranslationModule() {
{/* Content */}