diff --git a/frontend/src/input-bar-enhancements.ts b/frontend/src/input-bar-enhancements.ts
index d51cd05..a9dc2c1 100644
--- a/frontend/src/input-bar-enhancements.ts
+++ b/frontend/src/input-bar-enhancements.ts
@@ -8,7 +8,7 @@ function changeEvent(element: HTMLElement, inputID: string) {
 
 // @ts-ignore
 window.buttonListener = (buttonID: string, inputID: string) => {
-	let replacement = (buttonID === "lambdaButton") ? 'λ' : '∀';
+	let replacement = (buttonID === "lambda-button") ? 'λ' : '∀';
 	const button = document.getElementById(buttonID)!;
 	const input = document.getElementById(inputID)!;
 	button.addEventListener('click', () => {
diff --git a/frontend/styles/global.css b/frontend/styles/global.css
index a7a69e9..f04c078 100644
--- a/frontend/styles/global.css
+++ b/frontend/styles/global.css
@@ -10,6 +10,12 @@ vaadin-button, iron-icon, vaadin-drawer-toggle {
 	cursor: pointer;
 }
 
-#closeIcon:hover {
+.close-icon {
+	right: 0;
+	position: absolute;
+	bottom: 2.1em;
+}
+
+.close-icon:hover {
 	color: rgb(120, 120, 120);
 }
diff --git a/frontend/styles/view/error-view.css b/frontend/styles/view/error-view.css
index ea69bd0..9e3b423 100644
--- a/frontend/styles/view/error-view.css
+++ b/frontend/styles/view/error-view.css
@@ -1,15 +1,15 @@
-#errorViewContent {
+#error-view-content {
     align-items: center;
     background-color: #ff0000BB;
  }
 
-#errorAdditionalInfo {
+#error-additional-info {
     padding: 0;
     margin: 0;
     color: white;
     font-family: monospace;
 }
 
-#errorSummary {
+#error-summary {
     color: white;
 }
diff --git a/frontend/styles/view/image-slide.css b/frontend/styles/view/image-slide.css
index 897f12b..50d442c 100644
--- a/frontend/styles/view/image-slide.css
+++ b/frontend/styles/view/image-slide.css
@@ -1,9 +1,9 @@
-#slideLayout {
+#slide-layout {
 	align-items: center;
 	justify-content: center;
 	padding: 0;
 }
 
-#explanation {
+#slide-explanation {
 	margin-top: 5px;
 }
diff --git a/frontend/styles/view/main/example-dialog.css b/frontend/styles/view/main/example-dialog.css
index e4be10e..9e3a682 100644
--- a/frontend/styles/view/main/example-dialog.css
+++ b/frontend/styles/view/main/example-dialog.css
@@ -1,4 +1,4 @@
-#headingLayout {
+#example-heading-layout {
 	width: 100%;
 	display: flex;
 	position: relative;
@@ -6,13 +6,7 @@
 	justify-content: center;
 }
 
-#closeIcon {
-	right: 0;
-	position: absolute;
-	bottom: 2.1em;
-}
-
-#exampleContainer {
+#example-container {
 	padding: 0;
 	margin: 0;
 }
\ No newline at end of file
diff --git a/frontend/styles/view/main/help-dialog.css b/frontend/styles/view/main/help-dialog.css
index f0ca652..11bd0f3 100644
--- a/frontend/styles/view/main/help-dialog.css
+++ b/frontend/styles/view/main/help-dialog.css
@@ -1,4 +1,4 @@
-#contentLayout {
+#help-content-layout {
 	width: 1000px !important;
 	padding-left: 0;
 	padding-right: 0;
@@ -7,7 +7,7 @@
 	align-items: center;
 }
 
-#headingLayout {
+#help-heading-layout {
 	width: 100%;
 	display: flex;
 	position: relative;
@@ -20,13 +20,7 @@
 	width: 100%;
 }
 
-#closeIcon {
-	right: 0;
-	position: absolute;
-	bottom: 2.1em;
-}
-
-#typicalcInfo {
+#typicalc-info {
     padding-top: 24px;
     padding-bottom: 24px;
     text-align: center;
diff --git a/frontend/styles/view/main/inference-rule-field.css b/frontend/styles/view/main/inference-rule-field.css
index 92651bc..6dab1ac 100644
--- a/frontend/styles/view/main/inference-rule-field.css
+++ b/frontend/styles/view/main/inference-rule-field.css
@@ -1,4 +1,4 @@
-#inferenceRuleField {
+#inference-rule-field {
 	display: flex;
 	align-items: center;
 	border: 2px solid #e8e8e8;
@@ -9,7 +9,7 @@
 	padding: 0px;
 }
 
-#headerField {
+#inference-rule-header {
 	border-bottom: 2px solid #e8e8e8;
 	background-color: #f8f8f8;
 	display: grid;
@@ -20,16 +20,16 @@
 	border-radius: 5px 5px 0 0;
 }
 
-#ruleName {
+#rule-name {
 	margin: 1px;
 }
 
-#copyButton {
+#copy-button {
 	margin-left: auto;
 	margin-right: 10%;
 }
 
-#main {
+#inference-rule-content {
 	align-items: center;
 	justify-content: center;
 	width: 100%;
diff --git a/frontend/styles/view/main/info-dialog.css b/frontend/styles/view/main/info-dialog.css
index b546d87..7735f14 100644
--- a/frontend/styles/view/main/info-dialog.css
+++ b/frontend/styles/view/main/info-dialog.css
@@ -1,21 +1,15 @@
-#infoHeader {
+#info-header {
 	display: flex;
 	position: relative;
 	align-items: center;
 	justify-content: center;
 }
 
-#infoContent {
+#info-content {
 	align-items: flex-start;
 }
 
-#inputSyntax {
+#input-syntax {
 	font-family: "Courier";
 	margin-top: 1.5em;
-}
-
-#closeIcon {
-	right: 0;
-	position: absolute;
-	bottom: 2.1em;
 }
\ No newline at end of file
diff --git a/frontend/styles/view/main/input-bar.css b/frontend/styles/view/main/input-bar.css
index 2b8f1a3..8772e4b 100644
--- a/frontend/styles/view/main/input-bar.css
+++ b/frontend/styles/view/main/input-bar.css
@@ -4,12 +4,6 @@
 	padding-bottom: 0;
 }
 
-#inputBar {
-	align-items: flex-end;
-	padding: 0 1em;
-	margin-top: -0.5em;
-}
-
 #ass-input-field {
 	flex-grow: 1;
 	padding-top: 0;
diff --git a/frontend/styles/view/main/upper-bar.css b/frontend/styles/view/main/upper-bar.css
index 8de2807..8898f3a 100644
--- a/frontend/styles/view/main/upper-bar.css
+++ b/frontend/styles/view/main/upper-bar.css
@@ -4,38 +4,30 @@
 	align-items: center;
 	overflow-x: auto;
 	overflow-y: hidden;
-	
 	padding: 0.25em;
 }
 
-
-#header img {
-	border-radius: 50%;
-	height: var(--lumo-size-s);
-	margin-left: auto;
-	margin-right: var(--lumo-space-m);
-	overflow: hidden;
-	background-color: var(--lumo-contrast);
-}
-
-#viewTitle {
+#view-title {
 	font-size: var(--lumo-font-size-l);
 	cursor: pointer;
 	align-self: center;
 	margin: 0 47% 0.5% 0;
 }
 
-#viewTitle a {
+#view-title a {
 	color: var(--lumo-header-text-color);
 }
 
-#inputBar {
+#input-bar {
 	width: 75%;
 	flex-grow: 1;
+	align-items: flex-end;
+	padding: 0 1em;
+	margin-top: -0.5em;
 	justify-content: end;
 }
 
-#helpIcon {
+#help-icon {
 	color: white;
 	align-self: center;
 }
diff --git a/frontend/styles/view/share-dialog.css b/frontend/styles/view/share-dialog.css
index 39c29e8..5938d85 100644
--- a/frontend/styles/view/share-dialog.css
+++ b/frontend/styles/view/share-dialog.css
@@ -12,7 +12,7 @@
 	width: 100%;
 }
 
-#headingLayout {
+#share-heading-layout {
 	width: 100%;
 	max-height: 10%;
 	display: flex;
@@ -22,28 +22,6 @@
 	padding-bottom: 12px;
 }
 
-#closeIcon {
-	right: 0;
-	position: absolute;
-	bottom: 2.1em;
-}
-
-#url-area-layout {
-    width: 100%;
-}
-
-#package-area-tree-layout {
-    width: 100%;
-}
-
-#package-area-unification-layout {
-    width: 100%;
-}
-
-#latex-area-tree-layout {
-    width: 100%;
-}
-
-#latex-area-unification-layout {
-    width: 100%;
+.copy-button-layout {
+	width: 100%;
 }
diff --git a/frontend/styles/view/start-page.css b/frontend/styles/view/start-page.css
index 9d7ae57..110398e 100644
--- a/frontend/styles/view/start-page.css
+++ b/frontend/styles/view/start-page.css
@@ -1,25 +1,25 @@
-#startPage-Heading {
+#start-page-heading {
 	margin-top: 20px;
 	margin-bottom: 10px;
 	font-size: 50px;
 }
 
-#horizontalLine {
+#horizontal-line {
 	align-self: center;
 	width: 55em;
 	max-width: 100%;
 	min-height: 1px;
 }
 
-#textContainer {
+#start-text-container {
 	max-width: 55em;
 }
 
-#linkContainer {
+#start-link-container {
 	margin: 0;
 }
 
-#slideProgress {
+#slide-progress {
 	width: 55em;
 	max-width: 100%;
 	min-height: 1px;
@@ -27,7 +27,7 @@
 	margin-bottom: 0;
 }
 
-#startPage {
+#start-page {
 	padding: 0;
 	display: flex;
 	justify-content: space-between;
@@ -36,16 +36,16 @@
 	height: 100%;
 }
 
-#slideShow {
+#slide-show {
 	height: var(--paper-slide-height);
 	width: 100%;
 }
 
-#startPage::before {
+#start-page::before {
 	position: absolute;
 }
 
-#startPage #content {
+#start-page #start-page-content {
 	width: 100%;
 	overflow-y: auto;
 	margin-top: 0;
diff --git a/frontend/styles/view/type-inference.css b/frontend/styles/view/type-inference.css
index c6dbc3d..a618b5b 100644
--- a/frontend/styles/view/type-inference.css
+++ b/frontend/styles/view/type-inference.css
@@ -77,7 +77,7 @@ tc-explanation {
     margin-top: 0;
 }
 
-#horizontalLine {
+#horizontal-line {
     align-self: center;
     width: auto;
     min-height: 1px;
diff --git a/src/main/java/edu/kit/typicalc/view/content/errorcontent/ErrorView.java b/src/main/java/edu/kit/typicalc/view/content/errorcontent/ErrorView.java
index 844e62c..f06a0cd 100644
--- a/src/main/java/edu/kit/typicalc/view/content/errorcontent/ErrorView.java
+++ b/src/main/java/edu/kit/typicalc/view/content/errorcontent/ErrorView.java
@@ -23,9 +23,9 @@ import java.util.Optional;
 public class ErrorView extends VerticalLayout implements LocaleChangeObserver {
     private static final long serialVersionUID = 239587L;
 
-    private static final String ERROR_CONTENT_ID = "errorViewContent";
-    private static final String ADDITIONAL_INFO_ID = "errorAdditionalInfo";
-    private static final String ERROR_SUMMARY_ID = "errorSummary";
+    private static final String ERROR_CONTENT_ID = "error-view-content";
+    private static final String ADDITIONAL_INFO_ID = "error-additional-info";
+    private static final String ERROR_SUMMARY_ID = "error-summary";
 
     private final H3 heading;
     private final Div errorMessage;
diff --git a/src/main/java/edu/kit/typicalc/view/content/infocontent/ImageSlide.java b/src/main/java/edu/kit/typicalc/view/content/infocontent/ImageSlide.java
index 10a14f6..507c747 100644
--- a/src/main/java/edu/kit/typicalc/view/content/infocontent/ImageSlide.java
+++ b/src/main/java/edu/kit/typicalc/view/content/infocontent/ImageSlide.java
@@ -16,8 +16,8 @@ public class ImageSlide extends Slide implements LocaleChangeObserver {
 
     private static final long serialVersionUID = 232255503611054445L;
 
-    private static final String SLIDE_LAYOUT_ID = "slideLayout";
-    private static final String EXPLANATION_ID = "explanation";
+    private static final String SLIDE_LAYOUT_ID = "slide-layout";
+    private static final String EXPLANATION_ID = "slide-explanation";
 
     private final VerticalLayout slideLayout;
     private final Span explanation;
diff --git a/src/main/java/edu/kit/typicalc/view/content/infocontent/StartPageView.java b/src/main/java/edu/kit/typicalc/view/content/infocontent/StartPageView.java
index d2855f5..ea993a3 100644
--- a/src/main/java/edu/kit/typicalc/view/content/infocontent/StartPageView.java
+++ b/src/main/java/edu/kit/typicalc/view/content/infocontent/StartPageView.java
@@ -27,15 +27,15 @@ public class StartPageView extends VerticalLayout implements ControlPanelView, L
 
     private static final long serialVersionUID = 2502750919087936406L;
 
-    private static final String CONTENT_ID = "content";
-    private static final String HEADING_ID = "startPage-Heading";
-    private static final String H_LINE_ID = "horizontalLine";
-    private static final String TEXT_CONTAINER_ID = "textContainer";
-    private static final String LINK_CONTAINER_ID = "linkContainer";
-    private static final String SLIDE_PROGRESS_ID = "slideProgress";
-    private static final String CONTROL_PANEL_ID = "controlPanel";
-    private static final String START_PAGE_ID = "startPage";
-    private static final String SLIDE_SHOW_ID = "slideShow";
+    private static final String CONTENT_ID = "start-page-content";
+    private static final String HEADING_ID = "start-page-heading";
+    private static final String H_LINE_ID = "horizontal-line";
+    private static final String TEXT_CONTAINER_ID = "start-text-container";
+    private static final String LINK_CONTAINER_ID = "start-link-container";
+    private static final String SLIDE_PROGRESS_ID = "slide-progress";
+    private static final String CONTROL_PANEL_ID = "control-panel";
+    private static final String START_PAGE_ID = "start-page";
+    private static final String SLIDE_SHOW_ID = "slide-show";
 
     private static final String DOT = ".";
 
@@ -62,10 +62,8 @@ public class StartPageView extends VerticalLayout implements ControlPanelView, L
 
         H1 heading = new H1(getTranslation("root.typicalc"));
         heading.setId(HEADING_ID);
-        Hr line1 = new Hr();
-        line1.setId(H_LINE_ID);
-        Hr line2 = new Hr();
-        line2.setId(H_LINE_ID);
+        Hr line = new Hr();
+        line.setId(H_LINE_ID);
         introduction = new Span();
 
         linkText = new Text(getTranslation("root.linkText"));
@@ -76,7 +74,7 @@ public class StartPageView extends VerticalLayout implements ControlPanelView, L
         slideProgress = new ProgressBar(slideShow.getStartPosition(), slideShow.getSlides().length - 1);
         slideProgress.setId(SLIDE_PROGRESS_ID);
 
-        content.add(heading, line1, textContainer, slideProgress, slideShow, line2);
+        content.add(heading, textContainer, slideProgress, slideShow, line);
 
         Footer footer = new Footer(controlPanel);
         add(content, footer);
diff --git a/src/main/java/edu/kit/typicalc/view/content/typeinferencecontent/ShareDialog.java b/src/main/java/edu/kit/typicalc/view/content/typeinferencecontent/ShareDialog.java
index 52948cd..b17c962 100644
--- a/src/main/java/edu/kit/typicalc/view/content/typeinferencecontent/ShareDialog.java
+++ b/src/main/java/edu/kit/typicalc/view/content/typeinferencecontent/ShareDialog.java
@@ -27,16 +27,12 @@ import java.util.regex.Pattern;
 @CssImport("./styles/view/share-dialog.css")
 public class ShareDialog extends Dialog implements LocaleChangeObserver {
 
-    private static final String HEADING_LAYOUT_ID = "headingLayout";
-    private static final String SHARE_DIALOG_ID = "shareDialog";
+    private static final String HEADING_LAYOUT_ID = "share-heading-layout";
+    private static final String SHARE_DIALOG_ID = "share-dialog";
     private static final String LAYOUT_ID = "share-dialog-layout";
     private static final String FIELD_CLASS = "share-dialog-field";
-    private static final String CLOSE_ICON_ID = "closeIcon";
-    private static final String URL_AREA_LAYOUT_ID = "url-area-layout";
-    private static final String PACKAGE_AREA_TREE_LAYOUT_ID = "package-area-tree-layout";
-    private static final String PACKAGE_AREA_UNIFICATION_LAYOUT_ID = "package-area-unification-layout";
-    private static final String LATEX_AREA_TREE_LAYOUT_ID = "latex-area-tree-layout";
-    private static final String LATEX_AREA_UNIFICATION_LAYOUT_ID = "latex-area-unification-layout";
+    private static final String CLOSE_ICON_CLASS = "close-icon";
+    private static final String COPY_BUTTON_LAYOUT_CLASS = "copy-button-layout";
 
     private static final String RIGHT_ARROW_WHITE = "\\\\rightwhitearrow";
 
@@ -62,7 +58,7 @@ public class ShareDialog extends Dialog implements LocaleChangeObserver {
         heading = new H3();
         Icon closeIcon = new Icon(VaadinIcon.CLOSE_SMALL);
         closeIcon.addClickListener(event -> this.close());
-        closeIcon.setId(CLOSE_ICON_ID);
+        closeIcon.setClassName(CLOSE_ICON_CLASS);
 
         headingLayout.add(heading);
         headingLayout.add(closeIcon);
@@ -91,15 +87,15 @@ public class ShareDialog extends Dialog implements LocaleChangeObserver {
         Button copyButtonLatexAreaUnification = makeCopyButton(latexAreaUnification.getValue());
 
         HorizontalLayout urlLayout = new HorizontalLayout();
-        urlLayout.setId(URL_AREA_LAYOUT_ID);
+        urlLayout.setClassName(COPY_BUTTON_LAYOUT_CLASS);
         HorizontalLayout packageAreaTreeLayout = new HorizontalLayout();
-        packageAreaTreeLayout.setId(PACKAGE_AREA_TREE_LAYOUT_ID);
+        packageAreaTreeLayout.setClassName(COPY_BUTTON_LAYOUT_CLASS);
         HorizontalLayout latexAreaTreeLayout = new HorizontalLayout();
-        latexAreaTreeLayout.setId(LATEX_AREA_TREE_LAYOUT_ID);
+        latexAreaTreeLayout.setClassName(COPY_BUTTON_LAYOUT_CLASS);
         HorizontalLayout packageAreaUnificationLayout = new HorizontalLayout();
-        packageAreaUnificationLayout.setId(PACKAGE_AREA_UNIFICATION_LAYOUT_ID);
+        packageAreaUnificationLayout.setClassName(COPY_BUTTON_LAYOUT_CLASS);
         HorizontalLayout latexAreaUnificationLayout = new HorizontalLayout();
-        latexAreaUnificationLayout.setId(LATEX_AREA_UNIFICATION_LAYOUT_ID);
+        latexAreaUnificationLayout.setClassName(COPY_BUTTON_LAYOUT_CLASS);
 
         urlLayout.add(urlField, copyButtonUrl);
         packageAreaTreeLayout.add(packageAreaTree, copyButtonPackageAreaTree);
diff --git a/src/main/java/edu/kit/typicalc/view/content/typeinferencecontent/TypeInferenceView.java b/src/main/java/edu/kit/typicalc/view/content/typeinferencecontent/TypeInferenceView.java
index 1760753..bac6466 100644
--- a/src/main/java/edu/kit/typicalc/view/content/typeinferencecontent/TypeInferenceView.java
+++ b/src/main/java/edu/kit/typicalc/view/content/typeinferencecontent/TypeInferenceView.java
@@ -57,7 +57,7 @@ public class TypeInferenceView extends VerticalLayout
     private static final String HOVER_BUTTON_CLASS = "hovering-button";
     private static final String RULES_BUTTON_ID = "rules-button";
     private static final String EXPLANATION_TEXT_BUTTON_ID = "explanation-text-button";
-    private static final String H_LINE_ID = "horizontalLine";
+    private static final String H_LINE_ID = "horizontal-line";
     private static final String FOOTER_ID = "footer";
 
     private List<Integer> treeNumbers;
diff --git a/src/main/java/edu/kit/typicalc/view/main/ExampleDialog.java b/src/main/java/edu/kit/typicalc/view/main/ExampleDialog.java
index 8f6d023..e3b19f7 100644
--- a/src/main/java/edu/kit/typicalc/view/main/ExampleDialog.java
+++ b/src/main/java/edu/kit/typicalc/view/main/ExampleDialog.java
@@ -24,10 +24,10 @@ import com.vaadin.flow.i18n.LocaleChangeObserver;
 public class ExampleDialog extends Dialog implements LocaleChangeObserver {
     private static final long serialVersionUID = -428675165625776559L;
     
-    private static final String HEADING_LAYOUT_ID = "headingLayout";
-    private static final String EXAMPLE_DIALOG_ID = "exampleDialog";
-    private static final String CLOSE_ICON_ID = "closeIcon";
-    private static final String EXAMPLE_CONTAINER_ID = "exampleContainer";
+    private static final String HEADING_LAYOUT_ID = "example-heading-layout";
+    private static final String EXAMPLE_DIALOG_ID = "example-dialog";
+    private static final String CLOSE_ICON_CLASS = "close-icon";
+    private static final String EXAMPLE_CONTAINER_ID = "example-container";
     
     private final H3 instruction;
     private final transient Consumer<Pair<String, String>> setExamples;
@@ -49,7 +49,7 @@ public class ExampleDialog extends Dialog implements LocaleChangeObserver {
 
         Icon closeIcon = new Icon(VaadinIcon.CLOSE_SMALL);
         closeIcon.addClickListener(event -> this.close());
-        closeIcon.setId(CLOSE_ICON_ID);
+        closeIcon.setClassName(CLOSE_ICON_CLASS);
 
         headingLayout.add(instruction);
         headingLayout.add(closeIcon);
diff --git a/src/main/java/edu/kit/typicalc/view/main/HelpDialog.java b/src/main/java/edu/kit/typicalc/view/main/HelpDialog.java
index b896fc9..6d65594 100644
--- a/src/main/java/edu/kit/typicalc/view/main/HelpDialog.java
+++ b/src/main/java/edu/kit/typicalc/view/main/HelpDialog.java
@@ -23,11 +23,11 @@ public class HelpDialog extends Dialog implements LocaleChangeObserver {
     /*
      * IDs for the imported .css-file
      */
-    private static final String HEADING_LAYOUT_ID = "headingLayout";
-    private static final String CONTENT_LAYOUT_ID = "contentLayout";
+    private static final String HEADING_LAYOUT_ID = "help-heading-layout";
+    private static final String CONTENT_LAYOUT_ID = "help-content-layout";
     private static final String ACCORDION_ID = "accordion";
-    private static final String CLOSE_ICON_ID = "closeIcon";
-    private static final String TYPICALC_INFO_ID = "typicalcInfo";
+    private static final String CLOSE_ICON_CLASS = "close-icon";
+    private static final String TYPICALC_INFO_ID = "typicalc-info";
 
     private final H3 heading;
     private final Paragraph typicalcInfo;
@@ -43,7 +43,7 @@ public class HelpDialog extends Dialog implements LocaleChangeObserver {
 
         Icon closeIcon = new Icon(VaadinIcon.CLOSE_SMALL);
         closeIcon.addClickListener(event -> this.close());
-        closeIcon.setId(CLOSE_ICON_ID);
+        closeIcon.setClassName(CLOSE_ICON_CLASS);
 
         headingLayout.add(heading, closeIcon);
 
diff --git a/src/main/java/edu/kit/typicalc/view/main/InferenceRuleField.java b/src/main/java/edu/kit/typicalc/view/main/InferenceRuleField.java
index 19f9816..92f7875 100644
--- a/src/main/java/edu/kit/typicalc/view/main/InferenceRuleField.java
+++ b/src/main/java/edu/kit/typicalc/view/main/InferenceRuleField.java
@@ -28,11 +28,11 @@ public class InferenceRuleField extends VerticalLayout implements LocaleChangeOb
     /*
      * IDs for the imported .css-file
      */
-    private static final String INFERENCE_RULE_FIELD_ID = "inferenceRuleField";
-    private static final String HEADER_ID = "headerField";
-    private static final String MAIN_ID = "main";
-    private static final String RULE_NAME_ID = "ruleName";
-    private static final String COPY_BUTTON_ID = "copyButton";
+    private static final String INFERENCE_RULE_FIELD_ID = "inference-rule-field";
+    private static final String HEADER_ID = "inference-rule-header";
+    private static final String MAIN_ID = "inference-rule-content";
+    private static final String RULE_NAME_ID = "rule-name";
+    private static final String COPY_BUTTON_ID = "copy-button";
 
     private final String nameKey;
     private final Button copyButton;
@@ -60,11 +60,10 @@ public class InferenceRuleField extends VerticalLayout implements LocaleChangeOb
         ruleName.setId(RULE_NAME_ID);
         header.add(ruleName, copyButton);
 
-        VerticalLayout main = new VerticalLayout();
-        main.setId(MAIN_ID);
         MathjaxDisplay rule = new MathjaxDisplay(latex);
-        main.add(rule);
-        add(header, main);
+        VerticalLayout content = new VerticalLayout(rule);
+        content.setId(MAIN_ID);
+        add(header, content);
         setId(INFERENCE_RULE_FIELD_ID);
     }
 
diff --git a/src/main/java/edu/kit/typicalc/view/main/InfoContent.java b/src/main/java/edu/kit/typicalc/view/main/InfoContent.java
index 636d7eb..3ad5a5b 100644
--- a/src/main/java/edu/kit/typicalc/view/main/InfoContent.java
+++ b/src/main/java/edu/kit/typicalc/view/main/InfoContent.java
@@ -7,7 +7,7 @@ import com.vaadin.flow.i18n.LocaleChangeEvent;
 import com.vaadin.flow.i18n.LocaleChangeObserver;
 
 public class InfoContent extends VerticalLayout implements LocaleChangeObserver {
-    private static final String GRAMMAR_ID = "inputSyntax";
+    private static final String GRAMMAR_ID = "input-syntax";
 
     private final Span termExplanation;
     private final Paragraph termSyntax;
diff --git a/src/main/java/edu/kit/typicalc/view/main/InfoDialog.java b/src/main/java/edu/kit/typicalc/view/main/InfoDialog.java
index fa616d7..768fd78 100644
--- a/src/main/java/edu/kit/typicalc/view/main/InfoDialog.java
+++ b/src/main/java/edu/kit/typicalc/view/main/InfoDialog.java
@@ -18,9 +18,9 @@ public class InfoDialog extends Dialog {
     /*
      * IDs for the imported .css-file
      */
-    private static final String INFO_HEADER_ID = "infoHeader";
-    private static final String INFO_CONTENT_ID = "infoContent";
-    private static final String CLOSE_ICON_ID = "closeIcon";
+    private static final String INFO_HEADER_ID = "info-header";
+    private static final String INFO_CONTENT_ID = "info-content";
+    private static final String CLOSE_ICON_CLASS = "close-icon";
 
     /**
      * Creates new InfoDialog.
@@ -30,7 +30,7 @@ public class InfoDialog extends Dialog {
         HorizontalLayout infoHeader = new HorizontalLayout(heading);
         Icon closeIcon = new Icon(VaadinIcon.CLOSE_SMALL);
         closeIcon.addClickListener(event -> this.close());
-        closeIcon.setId(CLOSE_ICON_ID);
+        closeIcon.setClassName(CLOSE_ICON_CLASS);
         infoHeader.setId(INFO_HEADER_ID);
         infoHeader.add(closeIcon);
 
diff --git a/src/main/java/edu/kit/typicalc/view/main/InputBar.java b/src/main/java/edu/kit/typicalc/view/main/InputBar.java
index 8502d0c..d894c64 100644
--- a/src/main/java/edu/kit/typicalc/view/main/InputBar.java
+++ b/src/main/java/edu/kit/typicalc/view/main/InputBar.java
@@ -30,10 +30,9 @@ public class InputBar extends HorizontalLayout implements LocaleChangeObserver {
      * IDs for the imported .css-file
      */
     public static final String TERM_INPUT_FIELD_ID = "term-input-field";
-    private static final String INPUT_BAR_ID = "inputBar";
-    private static final String INFER_BUTTON_ID = "inferButton";
-    private static final String EXAMPLE_BUTTON_ID = "exampleButton";
-    private static final String LAMBDA_BUTTON_ID = "lambdaButton";
+    private static final String INFER_BUTTON_ID = "infer-button";
+    private static final String EXAMPLE_BUTTON_ID = "example-button";
+    private static final String LAMBDA_BUTTON_ID = "lambda-button";
     private static final String QUANTIFIER_BUTTON_ID = "quantifier-button";
     public static final String ASS_INPUT_FIELD_ID = "ass-input-field";
 
@@ -55,8 +54,6 @@ public class InputBar extends HorizontalLayout implements LocaleChangeObserver {
     protected InputBar(Consumer<Pair<String, String>> callback) {
         this.callback = callback;
 
-        setId(INPUT_BAR_ID);
-
         infoIcon = new Button(new Icon(VaadinIcon.INFO_CIRCLE));
         infoIcon.addClickListener(event -> onInfoIconClick());
 
diff --git a/src/main/java/edu/kit/typicalc/view/main/UpperBar.java b/src/main/java/edu/kit/typicalc/view/main/UpperBar.java
index 81e369e..1febcd0 100644
--- a/src/main/java/edu/kit/typicalc/view/main/UpperBar.java
+++ b/src/main/java/edu/kit/typicalc/view/main/UpperBar.java
@@ -34,9 +34,9 @@ public class UpperBar extends VerticalLayout implements LocaleChangeObserver {
     /*
      * IDs for the imported .css-file
      */
-    private static final String VIEW_TITLE_ID = "viewTitle";
-    private static final String INPUT_BAR_ID = "inputBar";
-    private static final String HELP_ICON_ID = "helpIcon";
+    private static final String VIEW_TITLE_ID = "view-title";
+    private static final String INPUT_BAR_ID = "input-bar";
+    private static final String HELP_ICON_ID = "help-icon";
     private static final String UPPER_BAR_ID = "header";
     private static final String TOP_LINE_ID = "top-line";
     private static final String LANGUAGE_SELECT_ID = "language-select";