diff --git a/src/components/ContextMenu/ContextMenu.vue b/src/components/ContextMenu/ContextMenu.vue
index d060d4f6..323211ed 100644
--- a/src/components/ContextMenu/ContextMenu.vue
+++ b/src/components/ContextMenu/ContextMenu.vue
@@ -80,3 +80,50 @@ export default {
     },
 }
 </script>
+
+<style scoped>
+#contextMenu {
+    width: 150px;
+    visibility: hidden;
+    position: fixed;
+    z-index: 1000;
+    opacity: 0;
+    top: 100;
+    left: 100;
+    cursor: pointer;
+    padding-bottom: 7px;
+    padding-top: 7px;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    user-select: none;
+    border-radius: 5px;
+}
+
+#contextMenu ul {
+    margin: 0;
+    padding: 0;
+}
+
+#contextMenu ul li {
+    list-style: none;
+    padding: 8px;
+    padding-left: 20px;
+    width: 90%;
+    margin: auto;
+}
+
+#contextMenu ul li:hover {
+    border-radius: 7px;
+    opacity: 1;
+}
+
+@supports (backdrop-filter: blur()) {
+    #contextMenu {
+        backdrop-filter: blur(5px);
+    }
+    #contextMenu ul li:hover {
+        backdrop-filter: blur(50px);
+        -webkit-backdrop-filter: blur(50px);
+    }
+}
+</style>
diff --git a/src/components/DialogBox/BooleanTable.vue b/src/components/DialogBox/BooleanTable.vue
index 528a6cd5..fbf8e757 100644
--- a/src/components/DialogBox/BooleanTable.vue
+++ b/src/components/DialogBox/BooleanTable.vue
@@ -21,3 +21,39 @@ const props = defineProps({
     tableBody: { type: Array, default: () => [] },
 })
 </script>
+
+<style scoped>
+#booleanTable {
+    width: 200px;
+}
+
+.content-table {
+    border-collapse: collapse;
+    font-size: 0.9em;
+    min-width: 400px;
+}
+
+.content-table tr th {
+    font-weight: bold;
+}
+
+.content-table th,
+.content-table td {
+    padding: 5px 15px;
+    margin: 0 3px;
+    width: 20%;
+    border-radius: 2px;
+}
+
+.content-table tbody tr {
+    text-align: center;
+    display: flex;
+    margin-bottom: 4px;
+}
+
+.content-table tbody {
+    display: table-row-group;
+    overflow: auto !important;
+    margin-left: 52px;
+}
+</style>
diff --git a/src/components/DialogBox/CombinationalAnalysis.vue b/src/components/DialogBox/CombinationalAnalysis.vue
index a40812bb..f93ca6bb 100644
--- a/src/components/DialogBox/CombinationalAnalysis.vue
+++ b/src/components/DialogBox/CombinationalAnalysis.vue
@@ -673,7 +673,7 @@ function printBooleanTable() {
         `<style>
         table {font: 40px Calibri;}
         table, th, td {border: solid 1px #DDD;border-collapse: 0;}
-        tbody {padding: 2px 3px;text-align: center;} 
+        tbody {padding: 2px 3px;text-align: center;}
         </style>`.replace(/\n/g, "")
     var win = window.open('', '', 'height=700,width=700')
     var htmlBody = `
@@ -691,6 +691,41 @@ function printBooleanTable() {
 }
 </script>
 
+<style>
+#combinationalAnalysis p input {
+    border: 1px solid white;
+    background: transparent;
+    font: inherit;
+    text-align: center;
+}
+
+#combinationalAnalysis table {
+    width: 460px;
+}
+
+.cAinput {
+    width: 30%;
+    padding: 0 5px;
+    margin: 8px 0;
+    box-sizing: border-box;
+    border-radius: 5px;
+    border: 1px solid #c5c5c5;
+    color: white;
+    outline: none;
+}
+
+.combinationalAnalysisInput:first-child {
+    padding-top: 20px;
+}
+
+.combinationalAnalysisInput {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-evenly;
+    align-items: baseline;
+}
+</style>
+
 <style scoped>
 .alertStyle {
     position: absolute;
@@ -700,9 +735,19 @@ function printBooleanTable() {
     transform: translate(-50%, -50%);
     z-index: 10000;
 }
+
+.ui-dialog[aria-describedby='combinationalAnalysis'] {
+    width: 460px;
+    min-height: 210px;
+    border: none;
+}
+
+#combinationalAnalysis {
+    margin-top: 10px;
+}
 </style>
 
-<!-- 
-    some errors due to output.value 
+<!--
+    some errors due to output.value
     output.value == null not working
 -->
diff --git a/src/components/DialogBox/InsertSubcircuit.vue b/src/components/DialogBox/InsertSubcircuit.vue
index c0e35d7e..57c8eb92 100644
--- a/src/components/DialogBox/InsertSubcircuit.vue
+++ b/src/components/DialogBox/InsertSubcircuit.vue
@@ -107,7 +107,28 @@ function newCircuit() {
 }
 </script>
 
-<!-- 
+<!--
 	Some error on inserting empty circuit as subcircuit
-	Some error on checking for rendering 
+	Some error on checking for rendering
 -->
+
+<style scoped>
+#insertSubcircuitDialog {
+    display: block;
+    padding-bottom: 0;
+    overflow: visible;
+}
+
+#insertSubcircuitDialog > p {
+    margin-bottom: 0;
+}
+
+#insertSubcircuitDialog > label {
+    height: 30px;
+    border-radius: 3px;
+    margin: 0 5px;
+    margin-bottom: 4px;
+    justify-content: center;
+    padding-left: 10px;
+}
+</style>
diff --git a/src/components/DialogBox/OpenOffline.vue b/src/components/DialogBox/OpenOffline.vue
index 3fe7063f..1ad2af6c 100644
--- a/src/components/DialogBox/OpenOffline.vue
+++ b/src/components/DialogBox/OpenOffline.vue
@@ -105,3 +105,26 @@ function OpenImportProjectDialog() {
     SimulatorState.dialogBox.import_project_dialog = true
 }
 </script>
+
+<style scoped>
+#openProjectDialog {
+    display: grid;
+    /* grid-template-columns: 1fr 1fr 1fr; */
+    /* grid-gap: 0 10px; */
+    align-items: center;
+}
+
+#openProjectDialog > label {
+    margin: 4px;
+    padding: 10px;
+    background: transparent;
+    border-radius: 1px;
+    width: 100%;
+}
+
+.deleteOfflineProject {
+    float: right;
+    cursor: pointer;
+    padding: 2px;
+}
+</style>
diff --git a/src/components/DialogBox/SaveImage.vue b/src/components/DialogBox/SaveImage.vue
index 9cfaba08..72b71e27 100644
--- a/src/components/DialogBox/SaveImage.vue
+++ b/src/components/DialogBox/SaveImage.vue
@@ -155,3 +155,79 @@ function renderCircuit() {
     )
 }
 </script>
+
+<style scoped>
+.download-dialog-section-2 .btn {
+    color: var(--text-lite);
+}
+.download-dialog-section-2 .btn:hover {
+    color: var(--text-lite);
+}
+
+.download-dialog-section-2 .option {
+    background: transparent;
+}
+
+#saveImageDialog {
+    border-radius: 2px;
+    padding: 13px;
+    margin: 0;
+    margin-top: 15px;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: center;
+    min-height: 188px !important;
+}
+
+.download-dialog-section-2 .option {
+    padding: 0;
+}
+
+.download-dialog-section-1 > label {
+    height: 30px;
+    width: 85px;
+}
+
+.download-dialog-section-2 {
+    background: transparent;
+    width: 100%;
+    display: inline-flex;
+    justify-content: space-around;
+}
+
+.btn-group-toggle {
+    background-color: transparent;
+    overflow: hidden;
+}
+.download-dialog-section-2 .active-btn {
+    box-shadow: none;
+}
+
+.download-dialog-section-2 .btn input[type='radio']:disabled {
+    background: red !important;
+    color: red !important;
+}
+
+.download-dialog-section-2_2 {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.download-dialog-section-3 {
+    border-radius: 2px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 6px 10px;
+    width: 320px;
+    position: inherit;
+}
+
+.download-dialog-section-3 > label {
+    width: 60px;
+    height: 25px;
+    margin-bottom: 0;
+}
+</style>
diff --git a/src/components/DialogBox/Themes/ApplyThemes.vue b/src/components/DialogBox/Themes/ApplyThemes.vue
index 72763ad6..99cc4b36 100644
--- a/src/components/DialogBox/Themes/ApplyThemes.vue
+++ b/src/components/DialogBox/Themes/ApplyThemes.vue
@@ -297,3 +297,56 @@ function closeCustomThemeDialog() {
     updateBG()
 }
 </script>
+
+<style scoped>
+.theme {
+    color: white;
+    width: 202.5px;
+    line-height: 30px;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    user-select: none;
+    margin: 15px;
+    border-radius: 1.5px;
+    transition: all 0.1s ease-out;
+    position: relative;
+    overflow-x: hidden;
+    height: 154px;
+}
+
+.themeNameBox {
+    display: block;
+    width: 100%;
+    cursor: pointer;
+}
+
+.themeSel {
+    background: transparent;
+    display: block;
+    width: 100%;
+    height: 100%;
+    position: absolute;
+}
+
+.customColorInput {
+    cursor: pointer;
+    width: 30%;
+    height: 30px;
+    overflow: visible;
+    position: relative;
+    top: 8px;
+    appearance: auto;
+    background-color: buttonface;
+    color: buttontext;
+    border-width: 1px;
+    border-style: solid;
+    border-color: buttonborder;
+    border-image: initial;
+    padding: 1px 2px;
+}
+
+.customColorLabel {
+    width: 60%;
+    height: 30px;
+}
+</style>
diff --git a/src/components/Dropdown/DropDown.vue b/src/components/Dropdown/DropDown.vue
index 89dc2b20..51bf237a 100644
--- a/src/components/Dropdown/DropDown.vue
+++ b/src/components/Dropdown/DropDown.vue
@@ -56,3 +56,19 @@ const props = defineProps({
 })
 const userId = useAuthStore().getUserId
 </script>
+
+<style scoped>
+.dropdown-menu > li > a {
+    padding: 7px 0;
+    width: 90%;
+    margin: auto;
+    transition: all 0.2s ease-in-out;
+    text-align: left;
+    padding-left: 10px;
+}
+
+.dropdown-menu > li > a:hover {
+    border-radius: 7px;
+    opacity: 1;
+}
+</style>
diff --git a/src/components/Logo/Logo.vue b/src/components/Logo/Logo.vue
index 56130b8c..aa218c37 100644
--- a/src/components/Logo/Logo.vue
+++ b/src/components/Logo/Logo.vue
@@ -21,4 +21,12 @@ export default {
 
 <style scoped>
 /* @import url('./Logo.css'); */
+
+.logo {
+    background: url(../../styles/css/assets/logo.svg) center/cover;
+    height: 30px;
+    width: 105px;
+    display: inline-block;
+    margin-right: 36px;
+}
 </style>
diff --git a/src/components/Navbar/Navbar.vue b/src/components/Navbar/Navbar.vue
index caeec961..735a61d1 100644
--- a/src/components/Navbar/Navbar.vue
+++ b/src/components/Navbar/Navbar.vue
@@ -46,6 +46,41 @@ function checkShowSidebar() {
 }
 </script>
 
+<style>
+.navbar .nav.pull-right {
+    float: right;
+    margin-right: 10px;
+    min-width: 85px;
+}
+
+@media (max-width: 991px) {
+    .navbar .nav.pull-right {
+        display: none;
+    }
+}
+</style>
+
 <style scoped>
 @import './Navbar.css';
+
+.navbar {
+    transition: background 0.5s ease-out;
+}
+
+.projectName {
+    position: relative;
+    left: 0.5rem;
+    font-size: 1em;
+    text-align: center;
+    display: inline-block;
+    width: 35vw;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+@media (max-width: 991px) {
+    .projectName {
+        visibility: hidden;
+    }
+}
 </style>
diff --git a/src/components/Navbar/NavbarLinks/NavbarLink/NavbarLink.vue b/src/components/Navbar/NavbarLinks/NavbarLink/NavbarLink.vue
index 7f61cd7e..e000ee69 100644
--- a/src/components/Navbar/NavbarLinks/NavbarLink/NavbarLink.vue
+++ b/src/components/Navbar/NavbarLinks/NavbarLink/NavbarLink.vue
@@ -30,4 +30,11 @@ const props = defineProps({
 
 <style scoped>
 /* @import url("./NavbarLink.css"); */
+
+@media (max-width: 991px) {
+    .nav-dropdown {
+        text-align: center;
+        padding-top: 20px;
+    }
+}
 </style>
diff --git a/src/components/Navbar/NavbarLinks/NavbarLinks.vue b/src/components/Navbar/NavbarLinks/NavbarLinks.vue
index 3c01a4dc..2611e73c 100644
--- a/src/components/Navbar/NavbarLinks/NavbarLinks.vue
+++ b/src/components/Navbar/NavbarLinks/NavbarLinks.vue
@@ -17,6 +17,26 @@ const props = defineProps({
 })
 </script>
 
+<style>
+.navbar-menu > li > a {
+    border: 1px solid transparent;
+    border-radius: 1px;
+    padding: 2px 8px;
+    transition: all 0.2s ease-in-out;
+    margin-right: 10px;
+}
+
+.navbar-menu > li > a:hover {
+    border-bottom: 1px solid white;
+    text-decoration: none;
+}
+</style>
+
 <style scoped>
 /* @import url('./NavbarLinks.css'); */
+
+.navbar-menu {
+    position: relative;
+    transition: all 0.2s ease-in-out;
+}
 </style>
diff --git a/src/components/Navbar/QuickButton/QuickButton.vue b/src/components/Navbar/QuickButton/QuickButton.vue
index aad07b93..d9b00657 100644
--- a/src/components/Navbar/QuickButton/QuickButton.vue
+++ b/src/components/Navbar/QuickButton/QuickButton.vue
@@ -136,7 +136,7 @@ function increment(): void {
 }
 </script>
 
-<style scoped>
+<style>
 /* @import url('./QuickButton.css'); */
 
 .panel-drag {
diff --git a/src/components/Navbar/User/User.vue b/src/components/Navbar/User/User.vue
index 839dae5e..eb421595 100644
--- a/src/components/Navbar/User/User.vue
+++ b/src/components/Navbar/User/User.vue
@@ -52,4 +52,50 @@ a:active {
     text-decoration: none;
     color: #fff;
 }
+
+.acc-caret {
+    right: -17px;
+}
+
+.account-btn {
+    position: absolute;
+    right: 13px;
+    padding: 4px 10px;
+    border: 1px solid transparent;
+    border-radius: 1px;
+    transition: all 0.2s ease-in-out;
+}
+
+.account-btn:hover {
+    border-bottom: 1px solid white;
+    text-decoration: none;
+}
+
+.user-field {
+    display: inline-block;
+    max-width: 11rem;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    text-align: right;
+}
+
+@media (max-width: 991px) {
+    .user-field {
+        visibility: hidden;
+    }
+}
+
+.signIn-btn {
+    color: var(--text-primary);
+}
+
+.cur-user,
+.signIn-btn {
+    color: #fff;
+}
+
+.signIn-btn:hover {
+    color: var(--text-primary);
+    text-decoration: none;
+}
 </style>
diff --git a/src/components/Panels/ElementsPanel/ElementsPanel.vue b/src/components/Panels/ElementsPanel/ElementsPanel.vue
index a157d901..2af26cff 100644
--- a/src/components/Panels/ElementsPanel/ElementsPanel.vue
+++ b/src/components/Panels/ElementsPanel/ElementsPanel.vue
@@ -240,8 +240,15 @@ function getTooltipText(elementName) {
 }
 </script>
 
-<style scoped>
+<style>
 .v-expansion-panel-title {
     min-height: 36px;
 }
+
+.ce-panel {
+    font: inherit;
+    width: 240px;
+    top: 90px;
+    left: 10px;
+}
 </style>#/simulator/src/metadata
diff --git a/src/components/Panels/PropertiesPanel/LayoutProperty/LayoutProperty.vue b/src/components/Panels/PropertiesPanel/LayoutProperty/LayoutProperty.vue
index 72e27285..e20e60f1 100644
--- a/src/components/Panels/PropertiesPanel/LayoutProperty/LayoutProperty.vue
+++ b/src/components/Panels/PropertiesPanel/LayoutProperty/LayoutProperty.vue
@@ -139,7 +139,7 @@ function layoutFunction(func: string) {
 }
 </script>
 
-<style scoped>
+<style>
 .v-btn.layoutBtn {
     margin: 7px 5px 0px 5px;
     width: 30px;
@@ -155,4 +155,30 @@ function layoutFunction(func: string) {
 .layout--btn-group {
     margin-right: 0;
 }
+
+#layoutDialog {
+    /* display: none; */
+    right: 10px;
+    top: 90px;
+    width: 220px;
+}
+
+.layout-title span {
+    display: block;
+    font-weight: bold;
+    margin: 8px;
+}
+
+.layout-title--enable {
+    display: flex;
+    justify-content: space-between;
+    margin: 15px 0;
+    padding: 0 8px;
+}
+
+.Layout-btn {
+    width: 48%;
+    height: 30px;
+    line-height: inherit;
+}
 </style>
diff --git a/src/components/Panels/PropertiesPanel/ModuleProperty/ModuleProperty.vue b/src/components/Panels/PropertiesPanel/ModuleProperty/ModuleProperty.vue
index 7d6dfa91..7e9e2b5f 100644
--- a/src/components/Panels/PropertiesPanel/ModuleProperty/ModuleProperty.vue
+++ b/src/components/Panels/PropertiesPanel/ModuleProperty/ModuleProperty.vue
@@ -41,3 +41,86 @@ const props = defineProps({
 
 const { panleBodyData, panelType, panelBodyHeader } = toRefs(props)
 </script>
+
+<style>
+.moduleProperty {
+    font: inherit;
+    width: 250px;
+    top: 90px;
+    right: 10px;
+}
+
+#moduleProperty-toolTip {
+    padding: 10px;
+}
+
+#moduleProperty-inner {
+    width: 85%;
+    margin: auto;
+}
+
+#moduleProperty-header {
+    font-size: 1.1em;
+    text-transform: uppercase;
+    margin-bottom: 20px;
+    text-align: left;
+}
+
+#moduleProperty-inner > p span {
+    display: inline-block;
+    font-weight: bold;
+}
+
+#moduleProperty-inner > div span {
+    display: inline-block;
+    font-weight: bold;
+}
+
+#moduleProperty-inner > p button {
+    border-radius: 2px;
+    margin: 3px;
+}
+
+#moduleProperty-inner > div button {
+    border-radius: 2px;
+    margin: 3px;
+}
+
+#moduleProperty-inner:last-child {
+    margin-bottom: 15px;
+}
+
+.moduleProperty select {
+    background-color: transparent;
+    border: none;
+    margin-left: 2px;
+    outline: none;
+}
+
+.moduleProperty input,
+.moduleProperty textarea {
+    background-color: transparent;
+    margin-top: 7px;
+    outline: none;
+    padding: 5px 5px;
+    width: 100%;
+}
+
+.moduleProperty textarea {
+    text-align: left;
+}
+
+.moduleProperty select,
+.moduleProperty input,
+.moduleProperty textarea {
+    border-radius: 7px !important;
+}
+
+.moduleProperty input:focus,
+.moduleProperty select:focus,
+.moduleProperty textarea {
+    outline-width: 0;
+    outline: none;
+    box-shadow: none;
+}
+</style>
diff --git a/src/components/Panels/PropertiesPanel/ModuleProperty/ProjectProperty/ProjectProperty.vue b/src/components/Panels/PropertiesPanel/ModuleProperty/ProjectProperty/ProjectProperty.vue
index 3e1aaaac..facb1ee3 100644
--- a/src/components/Panels/PropertiesPanel/ModuleProperty/ProjectProperty/ProjectProperty.vue
+++ b/src/components/Panels/PropertiesPanel/ModuleProperty/ProjectProperty/ProjectProperty.vue
@@ -244,7 +244,7 @@ type SimulatorStateType = {
 // }
 </script>
 
-<style scoped>
+<style>
 .panelButton {
     width: 100%;
     margin-bottom: 5px;
diff --git a/src/components/Panels/Shared/HelpButton.vue b/src/components/Panels/Shared/HelpButton.vue
index 9956010b..97a0bc4b 100644
--- a/src/components/Panels/Shared/HelpButton.vue
+++ b/src/components/Panels/Shared/HelpButton.vue
@@ -1,8 +1,8 @@
 <template>
 	<p v-if="helplink" class="btn-parent">
-		<button 
-			id="HelpButton" 
-			class="btn btn-primary btn-xs" type="button" 
+		<button
+			id="HelpButton"
+			class="btn btn-primary btn-xs" type="button"
 			@click="helpButtonClick"
 		>
 			&#9432 Help
@@ -18,4 +18,15 @@ const helplink = props.obj ?. helplink
 function helpButtonClick() {
 	window.open(helplink)
 }
-</script>
\ No newline at end of file
+</script>
+
+<style scoped>
+#HelpButton {
+	background-color: transparent;
+	border: 2px solid white;
+	width: 90%;
+	margin-bottom: 15px;
+	margin-top: 15px;
+	font-weight: bold;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/Panels/Shared/InputGroups.vue b/src/components/Panels/Shared/InputGroups.vue
index 628da797..f1a9079b 100644
--- a/src/components/Panels/Shared/InputGroups.vue
+++ b/src/components/Panels/Shared/InputGroups.vue
@@ -79,3 +79,19 @@ function decreaseValue() {
     ele.dispatchEvent(e)
 }
 </script>
+
+<style scoped>
+.input-group-prepend button {
+    margin-right: 5px;
+}
+.input-group-append button {
+    margin-left: 5px;
+}
+
+.input-group-prepend button:hover {
+    border-radius: 3px !important;
+}
+.input-group-append button:hover {
+    border-radius: 3px !important;
+}
+</style>
diff --git a/src/components/Panels/TestBenchPanel/TestBenchPanel.vue b/src/components/Panels/TestBenchPanel/TestBenchPanel.vue
index d4d5ebd4..ac27ccff 100644
--- a/src/components/Panels/TestBenchPanel/TestBenchPanel.vue
+++ b/src/components/Panels/TestBenchPanel/TestBenchPanel.vue
@@ -132,3 +132,193 @@ const currentCase = computed(() => testBenchStore.testbenchData.currentCase);
 const inputs = computed(() => testData.value.groups[currentGroup.value].inputs);
 const outputs = computed(() => testData.value.groups[currentGroup.value].outputs);
 </script>
+
+<style scoped>
+.testbench-manual-panel {
+    border-radius: 5px;
+    z-index: 100;
+    transition: background 0.5s ease-out;
+    position: fixed;
+    cursor: pointer;
+    left: 10px;
+    top: 470px;
+}
+
+.testbench-manual-panel .panel-header {
+    border-radius: 5px;
+    border-top-right-radius: 5px;
+    padding: 3px;
+    font-weight: bold;
+    font-size: 16px;
+    text-transform: uppercase;
+    text-align: left;
+    cursor: move;
+}
+
+.tb-case-arrow {
+    border: solid var(--text-panel);
+    border-width: 0 3px 3px 0;
+    display: inline-block;
+    padding: 3px;
+}
+
+.tb-case-arrow-right {
+    transform: rotate(-45deg);
+    -webkit-transform: rotate(-45deg);
+}
+
+.tb-case-arrow-left {
+    transform: rotate(135deg);
+    -webkit-transform: rotate(135deg);
+}
+
+.testbench-manual-panel .panel-body {
+    width: 700px;
+}
+
+.testbench-manual-panel b {
+    font-weight: bold;
+}
+
+.tb-manual-test-data {
+    /*text-align: center;*/
+    margin-top: 10px;
+    border-bottom: 1px solid var(--br-secondary);
+    padding-left: 8px;
+    padding-right: 8px;
+}
+
+.tb-manual-test-data .tb-data {
+    margin-right: 10px;
+}
+
+.tb-data span {
+    vertical-align: middle;
+    display: inline-block;
+    max-width: 200px;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+}
+
+.tb-data#data-title {
+    float: left;
+}
+
+.tb-data#data-type {
+    float: right;
+}
+
+.tb-manual-table {
+    position: relative;
+    display: inline-block;
+    margin-top: 10px;
+    color: var(--text-panel);
+    max-width: 650px;
+    overflow-x: auto;
+    white-space: nowrap;
+}
+
+.tb-manual-table td,
+.tb-manual-table th {
+    padding-left: 15px;
+    padding-right: 15px;
+    padding-top: 12px;
+    padding-bottom: 12px;
+    text-align: center;
+    min-width: 80px;
+}
+
+.tb-manual-table th {
+    background: var(--table-head-dark);
+    height: 50px;
+}
+
+.testbench-manual-panel-buttons {
+    position: relative;
+    display: table-cell;
+    flex-wrap: wrap;
+    right: 0px;
+    text-align: left;
+    width: 200px;
+}
+
+.tb-dialog-button {
+    display: inline;
+    margin: 8px;
+    border-radius: 5px !important;
+    padding-left: 8px !important;
+    padding-right: 8px !important;
+    padding-top: 4px !important;
+    padding-bottom: 4px !important;
+}
+
+.tb-manual-test-buttons {
+    display: flex;
+    margin-top: 20px;
+    margin-left: 30px;
+    margin-right: 30px;
+    height: 25px;
+    overflow: auto;
+}
+
+.tb-manual-test-buttons .tb-case-button-left {
+    border-bottom-left-radius: 5px;
+    border-top-left-radius: 5px;
+    width: 24px;
+}
+
+.tb-manual-test-buttons .tb-case-button-right {
+    border-bottom-right-radius: 5px;
+    border-top-right-radius: 5px;
+    width: 24px;
+}
+
+.tb-manual-test-buttons .tb-test-label {
+    position: relative;
+    top: 0px;
+    line-height: 25px;
+    height: 25px;
+    margin: 0px;
+    padding-left: 2px;
+    padding-right: 2px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    background: #c4c4c4;
+    color: black;
+}
+
+.tb-manual-test-buttons .tb-test-label.group-label {
+    text-align: center;
+    width: 100px;
+}
+
+.tb-manual-test-buttons .tb-test-label.case-label {
+    text-align: center;
+    width: 40px;
+}
+
+.tb-group-buttons {
+    float: left;
+}
+
+.tb-case-buttons {
+    float: right;
+}
+
+.tb-test-null {
+    width: 350px !important;
+}
+
+.validation-ui-table td,
+.validation-ui-table th {
+    padding-left: 15px;
+    padding-right: 15px;
+    padding-top: 12px;
+    padding-bottom: 12px;
+    text-align: center;
+    min-width: 80px;
+    color: white;
+}
+</style>
diff --git a/src/components/Panels/TimingDiagramPanel/TimingDiagramPanel.vue b/src/components/Panels/TimingDiagramPanel/TimingDiagramPanel.vue
index 981fb1b9..8b4c45fb 100644
--- a/src/components/Panels/TimingDiagramPanel/TimingDiagramPanel.vue
+++ b/src/components/Panels/TimingDiagramPanel/TimingDiagramPanel.vue
@@ -105,10 +105,59 @@ function handleUnitsChange(event: Event) {
 }
 </script>
 
-<style scoped>
+<style>
+#plotArea {
+    padding: 3px;
+    width: 100%;
+}
+
 .timing-diagram-panel-button {
     margin-right: 5px;
 }
+
+.timing-diagram-panel {
+    border-radius: 5px;
+    z-index: 70;
+    transition: background 0.5s ease-out;
+    position: fixed;
+    cursor: pointer;
+    left: 300px;
+    top: 90px;
+}
+
+#plot {
+    width: 800px;
+}
+
+.timing-diagram-toolbar {
+    padding-left: 4px;
+    padding: 2px;
+    cursor: default;
+}
+
+.timing-diagram-toolbar input {
+    width: 80px;
+    background: transparent !important;
+}
+
+#timing-diagram-log {
+    font-size: 12.5px;
+    padding: 3px;
+    margin-left: 5px;
+    /* margin-bottom: 5px; */
+    border-radius: 3px;
+}
+
+.timing-diagram-panel .panel-header {
+    border-radius: 5px;
+    border-top-right-radius: 5px;
+    padding: 3px;
+    font-weight: bold;
+    font-size: 16px;
+    text-transform: uppercase;
+    text-align: left;
+    cursor: move;
+}
 </style>
 
 <!-- TODO: input element to vue, remove remaining dom manipulation, header component -->
diff --git a/src/components/Panels/VerilogEditorPanel/VerilogEditorPanel.vue b/src/components/Panels/VerilogEditorPanel/VerilogEditorPanel.vue
index 5a2011fa..f3dbaf6e 100644
--- a/src/components/Panels/VerilogEditorPanel/VerilogEditorPanel.vue
+++ b/src/components/Panels/VerilogEditorPanel/VerilogEditorPanel.vue
@@ -94,10 +94,31 @@ watch(selectedTheme, (newTheme: string) => {
 })
 </script>
 
-<style scoped>
+<style>
+#verilogOutput {
+    font-size: 12px;
+}
+
 .applyTheme {
     width: 90%;
     border: 1px solid #fff;
     padding: 8px;
 }
+
+#verilogEditorPanel {
+    width: 220px;
+    font: inherit;
+    display: none;
+    top: 90px;
+    right: 300px;
+}
+
+.code-window .CodeMirror {
+    height: calc(100vh - 78px);
+    overflow: scroll;
+}
+
+.code-window {
+    display: none;
+}
 </style>
diff --git a/src/components/TabsBar/TabsBar.vue b/src/components/TabsBar/TabsBar.vue
index d375ccd9..b5090c85 100644
--- a/src/components/TabsBar/TabsBar.vue
+++ b/src/components/TabsBar/TabsBar.vue
@@ -287,6 +287,88 @@ function isEmbed(): boolean {
     z-index: 1;
 }
 
+#tabsBar {
+    width: 100%;
+    /* height: 23.5px; */
+    display: block;
+    align-items: center;
+    z-index: 99;
+    /* position: absolute;
+    top: 47px; */
+}
+
+.embed-tabs {
+    background-color: transparent !important;
+}
+
+#tabsBar .placeholder {
+    justify-content: space-between;
+    padding: 1px;
+    display: inline-block;
+    margin: 2px;
+    text-align: center;
+    /* min-width: 110px; */
+    font-size: 14px;
+    transition: all 0.2s ease-in-out;
+}
+
+.placeholder::before {
+    display: inline-block;
+    padding: 2px 5px;
+    content: '|';
+}
+
+#tabsBar .circuits {
+    justify-content: space-between;
+    border-radius: 3px;
+    padding: 1px;
+    display: inline-flex;
+    align-items: center;
+    margin: 2px;
+    text-align: center;
+    /* min-width: 110px; */
+    font-size: 14px;
+    transition: all 0.2s ease-in-out;
+}
+
+#tabsBar .circuits > span {
+    display: inline-block;
+    padding: 2px 5px;
+}
+
+.circuitName {
+    cursor: pointer;
+}
+
+.tabsbarInput {
+    align-items: center;
+}
+
+#tabsBar button {
+    order: 99; /* could have better solution */
+    width: 20px;
+    align-items: center;
+    display: inline;
+    font-size: 20px;
+    text-align: center;
+    padding-bottom: 5px;
+    text-decoration: none;
+    outline: none;
+    border-radius: 1px;
+    transition: all 0.1s ease-in-out;
+    border-radius: 4px;
+    margin-left: 1px;
+}
+
+#tabsBar button:focus {
+    outline: none !important;
+    box-shadow: none !important;
+}
+#tabsBar button:active {
+    outline: none !important;
+    box-shadow: none !important;
+}
+
 #tabsBar.embed-tabbar {
     background-color: transparent;
 }
diff --git a/src/components/helpers/createNewProject/TextEditor.vue b/src/components/helpers/createNewProject/TextEditor.vue
index 62811a4c..9483e299 100644
--- a/src/components/helpers/createNewProject/TextEditor.vue
+++ b/src/components/helpers/createNewProject/TextEditor.vue
@@ -442,4 +442,16 @@ export default {
     background: #333;
     color: #fff;
 }
+
+.ProseMirror {
+    height: 12rem;
+    overflow-y: auto;
+    padding-left: 0.5em;
+    padding-right: 0.5em;
+    outline: none;
+}
+
+.fullscreen .ProseMirror {
+    height: 75vh;
+}
 </style>
diff --git a/src/pages/embed.vue b/src/pages/embed.vue
index 979f2ad2..02f62685 100644
--- a/src/pages/embed.vue
+++ b/src/pages/embed.vue
@@ -311,4 +311,24 @@ if (document.addEventListener) {
     background-color: var(--bg-circuit);
     color: var(--text);
 }
+
+.embed-fullscreen-btn {
+    border-radius: 3px;
+    width: auto;
+}
+
+.code-window-embed .CodeMirror {
+    height: 100%;
+    overflow: scroll;
+}
+
+.code-window-embed {
+    position: absolute;
+    top: 28px;
+    height: 100%;
+    width: 100%;
+    overflow: scroll;
+    z-index: 3;
+    display: none;
+}
 </style>
diff --git a/src/styles/css/UX.css b/src/styles/css/UX.css
index e5011d8a..f349511d 100644
--- a/src/styles/css/UX.css
+++ b/src/styles/css/UX.css
@@ -1,49 +1,3 @@
-.deleteOfflineProject {
-    float: right;
-    cursor: pointer;
-    padding: 2px;
-}
-
-#contextMenu {
-    width: 150px;
-    visibility: hidden;
-    box-shadow: 0px 2px 7px rgba(0, 0, 0, 0.2);
-    border: 1px solid rgba(0, 0, 0, 0.2);
-    position: fixed;
-    z-index: 100;
-    background: #fff;
-    opacity: 0;
-    top: 100;
-    left: 100;
-    cursor: pointer;
-    color: #000;
-    padding-bottom: 4px;
-    padding-top: 4px;
-    transition: opacity 0.2s ease-in-out;
-    user-select: none;
-}
-
-#contextMenu ul {
-    margin: 0;
-    padding: 0;
-    font: 16px sans-serif;
-}
-
-#contextMenu ul li {
-    list-style: none;
-    padding: 8px;
-    padding-left: 20px;
-}
-
-#contextMenu ul li a {
-    text-decoration: none;
-    color: #000 !important;
-}
-
-#contextMenu ul li:hover {
-    background: rgba(0, 0, 0, 0.1);
-}
-
 button:focus {
     outline: 0;
 }
@@ -74,33 +28,6 @@ button:focus {
     background-color: #f5f5f5;
 }
 
-#layoutDialog {
-    position: absolute;
-    right: 100px;
-    top: 100px;
-    z-index: 101;
-    width: 200px;
-    height: 230px;
-    border: 1px solid grey;
-    border-radius: 2px;
-    background-color: white;
-    overflow-x: hidden;
-}
-
-.projectName {
-    /*margin:3px;*/
-    color: #0099ff;
-    margin: 0 auto;
-    text-align: center;
-    font-size: 1.4em;
-    position: static;
-    left: 50%;
-    display: block;
-    width: 500px;
-    text-align: center;
-    margin-left: -250px;
-}
-
 .inline {
     width: auto;
     padding-right: 20px;
@@ -218,66 +145,11 @@ input[type='radio']:checked ~ label {
     /*margin-bottom: 0;*/
 }
 
-/* MODULES */
-
-.moduleProperty {
-    display: none;
-    background-color: #333;
-    color: #fff;
-    /*padding-bottom: 2em;*/
-    margin-top: 1em;
-}
-
-#moduleProperty-inner {
-    border: 1px solid #0099ff;
-    padding: 1em;
-    /*margin-bottom: 1em;*/
-}
-
-#moduleProperty-toolTip {
-    padding: 10px;
-    /*font-size: 1.1em;*/
-    color: #0099ff;
-}
-
-#moduleProperty-title {
-    text-transform: uppercase;
-    font-size: 1.3em;
-    color: #0099ff;
-    margin-bottom: 0.55em;
-    text-align: center;
-}
-
-#moduleProperty-header {
-    font-size: 1.1em;
-    text-transform: uppercase;
-    margin-bottom: 0.5em;
-}
-
-#moduleProperty-inner > p {
-    margin: 0;
-    margin-top: 0.2em;
-}
-
 input,
 select {
     padding: 0.25rem;
 }
 
-.moduleProperty input,
-.moduleProperty select {
-    background-color: #333;
-    border: none;
-    border-bottom: 2px solid #ccc;
-}
-
-.moduleProperty input:active,
-.moduleProperty input:focus,
-.moduleProperty select:active,
-.moduleProperty select:focus {
-    border-bottom: 2px solid #0099ff;
-}
-
 .navbar.navbar-default {
     margin: 0px;
     border-radius: 0px;
@@ -294,62 +166,6 @@ select {
 
 /* END OF MODULES  */
 
-#tabsBar {
-    width: 100%;
-    /*height: 3em;*/
-    margin-left: 20px;
-    background-color: #000;
-}
-
-#tabsBar div {
-    display: inline-block;
-    /*padding-left: 0.5em;*/
-    margin: 0.1em;
-    color: #fff;
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    position: relative;
-}
-
-#tabsBar .circuits {
-    color: #fff;
-    text-align: center;
-    background-color: #00284d;
-    padding-left: 0.5em;
-    padding-right: 1.5em;
-    border: 1px solid #005cb3;
-    border-radius: 0.1em;
-}
-
-#tabsBar .circuits:hover {
-    background-color: #00ace6;
-    /*border: 1px solid #0099ff;*/
-    transition-duration: 100ms;
-}
-
-#tabsBar .current {
-    /*background-color: #0086b3;*/
-    background-color: #004280;
-    border: 1px solid #0099ff;
-}
-
-.tabsCloseButton:hover {
-    color: #fff;
-    font-family: 'Gill Sans', sans-serif;
-    margin-left: 1em;
-    opacity: 0.5;
-}
-.tabsCloseButton {
-    color: #111;
-    font-family: 'Gill Sans', sans-serif;
-    margin-left: 1em;
-    opacity: 1;
-    position: absolute;
-    top: 5px;
-    right: 3;
-}
-
 th,
 td {
     padding-left: 15px;
@@ -359,10 +175,6 @@ td {
     color: white;
 }
 
-#booleanTable {
-    width: 200px;
-}
-
 table {
     border-collapse: collapse;
     -webkit-user-select: none;
@@ -588,19 +400,6 @@ input:checked + .slider2:before {
     /*transition: opacity .25s ease-in-out;*/
 }
 
-#plot {
-    position: fixed;
-    z-index: 1;
-    bottom: 0;
-    right: 0;
-    /*display: block;*/
-    /*height: 0px;*/
-    /*width: 100%;*/
-    overflow-y: scroll;
-    background-color: #eee;
-    /*background-blend-mode: color;*/
-}
-
 .left {
     float: left;
 }
diff --git a/src/styles/css/main.stylesheet.css b/src/styles/css/main.stylesheet.css
index 873d0597..3ef1fb80 100644
--- a/src/styles/css/main.stylesheet.css
+++ b/src/styles/css/main.stylesheet.css
@@ -130,19 +130,6 @@ input[type='text']:focus {
     -o-user-select: none;
 }
 
-.navbar-menu {
-    position: relative;
-    transition: all 0.2s ease-in-out;
-}
-
-.navbar-menu > li > a {
-    border: 1px solid transparent;
-    border-radius: 1px;
-    padding: 2px 8px;
-    transition: all 0.2s ease-in-out;
-    margin-right: 10px;
-}
-
 .navbar-menu > li > a span,
 .acc-caret {
     content: '';
@@ -160,86 +147,11 @@ input[type='text']:focus {
     transition: all 0.2s ease-in-out;
 }
 
-.acc-caret {
-    right: -17px;
-}
-.navbar-menu > li > a:hover {
-    border-bottom: 1px solid white;
-    text-decoration: none;
-}
-
 .navbar-menu > li > a:hover span,
 .acc-drop:hover .acc-caret {
     background: none;
 }
 
-.projectName {
-    position: relative;
-    left: 0.5rem;
-    font-size: 1em;
-    text-align: center;
-    display: inline-block;
-    width: 35vw;
-    overflow: hidden;
-    text-overflow: ellipsis;
-}
-
-@media (max-width: 991px) {
-    .projectName {
-        visibility: hidden;
-    }
-}
-
-.account-btn {
-    position: absolute;
-    right: 13px;
-    padding: 4px 10px;
-    border: 1px solid transparent;
-    border-radius: 1px;
-    transition: all 0.2s ease-in-out;
-}
-
-.account-btn:hover {
-    border-bottom: 1px solid white;
-    text-decoration: none;
-}
-
-.user-field {
-    display: inline-block;
-    max-width: 11rem;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    text-align: right;
-}
-
-@media (max-width: 991px) {
-    .user-field {
-        visibility: hidden;
-    }
-}
-
-.signIn-btn {
-    color: var(--text-primary);
-}
-
-.cur-user,
-.signIn-btn {
-    color: #fff;
-}
-
-.signIn-btn:hover {
-    color: var(--text-primary);
-    text-decoration: none;
-}
-
-.logo {
-    background: url(./assets/logo.svg) center/cover;
-    height: 30px;
-    width: 105px;
-    display: inline-block;
-    margin-right: 36px;
-}
-
 /* dropdown-menu styles */
 
 .dropdown > ul {
@@ -287,20 +199,6 @@ input[type='text']:focus {
     top: 14.5px;
 }
 
-.dropdown-menu > li > a {
-    padding: 7px 0;
-    width: 90%;
-    margin: auto;
-    transition: all 0.2s ease-in-out;
-    text-align: left;
-    padding-left: 10px;
-}
-
-.dropdown-menu > li > a:hover {
-    border-radius: 7px;
-    opacity: 1;
-}
-
 @media (max-width: 991px) {
     .navbar-nav .dropdown-menu {
         position: absolute !important;
@@ -308,60 +206,6 @@ input[type='text']:focus {
     }
 }
 
-#contextMenu {
-    width: 150px;
-    visibility: hidden;
-    position: fixed;
-    z-index: 1000;
-    opacity: 0;
-    top: 100;
-    left: 100;
-    cursor: pointer;
-    padding-bottom: 7px;
-    padding-top: 7px;
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    user-select: none;
-    border-radius: 5px;
-}
-
-#contextMenu ul {
-    margin: 0;
-    padding: 0;
-}
-
-#contextMenu ul li {
-    list-style: none;
-    padding: 8px;
-    padding-left: 20px;
-    width: 90%;
-    margin: auto;
-}
-
-#contextMenu ul li:hover {
-    border-radius: 7px;
-    opacity: 1;
-}
-
-@supports (backdrop-filter: blur()) {
-    #contextMenu {
-        backdrop-filter: blur(5px);
-    }
-    #contextMenu ul li:hover {
-        backdrop-filter: blur(50px);
-        -webkit-backdrop-filter: blur(50px);
-    }
-}
-
-/** ce-panel styling  starts */
-
-.ce-panel {
-    font: inherit;
-    width: 240px;
-    top: 90px;
-    left: 10px;
-}
-
 .accordion > :last-child {
     margin-bottom: 15px;
 }
@@ -569,98 +413,6 @@ div.icon img {
 
 /*! custom scroll  styling starts ends here  */
 
-/*! ce-panel styling  ends */
-
-/** tab bar styling starts */
-
-#tabsBar {
-    width: 100%;
-    /* height: 23.5px; */
-    display: block;
-    align-items: center;
-    z-index: 99;
-    /* position: absolute;
-    top: 47px; */
-}
-
-.embed-tabs {
-    background-color: transparent !important;
-}
-
-#tabsBar .placeholder {
-    justify-content: space-between;
-    padding: 1px;
-    display: inline-block;
-    margin: 2px;
-    text-align: center;
-    /* min-width: 110px; */
-    font-size: 14px;
-    transition: all 0.2s ease-in-out;
-}
-
-.placeholder::before {
-    display: inline-block;
-    padding: 2px 5px;
-    content: '|';
-}
-
-#tabsBar .circuits {
-    justify-content: space-between;
-    border-radius: 3px;
-    padding: 1px;
-    display: inline-flex;
-    align-items: center;
-    margin: 2px;
-    text-align: center;
-    /* min-width: 110px; */
-    font-size: 14px;
-    transition: all 0.2s ease-in-out;
-}
-
-#tabsBar .circuits > span {
-    display: inline-block;
-    padding: 2px 5px;
-}
-
-.circuitName {
-    cursor: pointer;
-}
-
-#tabsBar button {
-    order: 99; /* could have better solution */
-    width: 20px;
-    align-items: center;
-    display: inline;
-    font-size: 20px;
-    text-align: center;
-    padding-bottom: 5px;
-    text-decoration: none;
-    outline: none;
-    border-radius: 1px;
-    transition: all 0.1s ease-in-out;
-    border-radius: 4px;
-    margin-left: 1px;
-}
-
-#tabsBar button:focus {
-    outline: none !important;
-    box-shadow: none !important;
-}
-#tabsBar button:active {
-    outline: none !important;
-    box-shadow: none !important;
-}
-
-/*! tab bar styling ends */
-/** Module property styling starts here */
-
-.moduleProperty {
-    font: inherit;
-    width: 250px;
-    top: 90px;
-    right: 10px;
-}
-
 .layoutElementPanel {
     width: 220px;
     font: inherit;
@@ -669,320 +421,6 @@ div.icon img {
     left: 10px;
 }
 
-.timing-diagram-panel {
-    border-radius: 5px;
-    z-index: 70;
-    transition: background 0.5s ease-out;
-    position: fixed;
-    cursor: pointer;
-    left: 300px;
-    top: 90px;
-}
-
-.timing-diagram-panel .panel-header {
-    border-radius: 5px;
-    border-top-right-radius: 5px;
-    padding: 3px;
-    font-weight: bold;
-    font-size: 16px;
-    text-transform: uppercase;
-    text-align: left;
-    cursor: move;
-}
-
-/* Testbench UI Styling begin */
-
-.testbench-manual-panel {
-    border-radius: 5px;
-    z-index: 100;
-    transition: background 0.5s ease-out;
-    position: fixed;
-    cursor: pointer;
-    left: 10px;
-    top: 470px;
-}
-
-.testbench-manual-panel .panel-header {
-    border-radius: 5px;
-    border-top-right-radius: 5px;
-    padding: 3px;
-    font-weight: bold;
-    font-size: 16px;
-    text-transform: uppercase;
-    text-align: left;
-    cursor: move;
-}
-
-.tb-case-arrow {
-    border: solid var(--text-panel);
-    border-width: 0 3px 3px 0;
-    display: inline-block;
-    padding: 3px;
-}
-
-.tb-case-arrow-right {
-    transform: rotate(-45deg);
-    -webkit-transform: rotate(-45deg);
-}
-
-.tb-case-arrow-left {
-    transform: rotate(135deg);
-    -webkit-transform: rotate(135deg);
-}
-
-.testbench-manual-panel .panel-body {
-    width: 700px;
-}
-
-.testbench-manual-panel b {
-    font-weight: bold;
-}
-
-.tb-manual-test-data {
-    /*text-align: center;*/
-    margin-top: 10px;
-    border-bottom: 1px solid var(--br-secondary);
-    padding-left: 8px;
-    padding-right: 8px;
-}
-
-.tb-manual-test-data .tb-data {
-    margin-right: 10px;
-}
-
-.tb-data span {
-    vertical-align: middle;
-    display: inline-block;
-    max-width: 200px;
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-}
-
-.tb-data#data-title {
-    float: left;
-}
-
-.tb-data#data-type {
-    float: right;
-}
-
-.tb-manual-table {
-    position: relative;
-    display: inline-block;
-    margin-top: 10px;
-    color: var(--text-panel);
-    max-width: 650px;
-    overflow-x: auto;
-    white-space: nowrap;
-}
-
-.tb-manual-table td,
-.tb-manual-table th {
-    padding-left: 15px;
-    padding-right: 15px;
-    padding-top: 12px;
-    padding-bottom: 12px;
-    text-align: center;
-    min-width: 80px;
-}
-
-.tb-manual-table th {
-    background: var(--table-head-dark);
-    height: 50px;
-}
-
-.testbench-manual-panel-buttons {
-    position: relative;
-    display: table-cell;
-    flex-wrap: wrap;
-    right: 0px;
-    text-align: left;
-    width: 200px;
-}
-
-.tb-dialog-button {
-    display: inline;
-    margin: 8px;
-    border-radius: 5px !important;
-    padding-left: 8px !important;
-    padding-right: 8px !important;
-    padding-top: 4px !important;
-    padding-bottom: 4px !important;
-}
-
-.tb-manual-test-buttons {
-    display: flex;
-    margin-top: 20px;
-    margin-left: 30px;
-    margin-right: 30px;
-    height: 25px;
-    overflow: auto;
-}
-
-.tb-manual-test-buttons .tb-case-button-left {
-    border-bottom-left-radius: 5px;
-    border-top-left-radius: 5px;
-    width: 24px;
-}
-
-.tb-manual-test-buttons .tb-case-button-right {
-    border-bottom-right-radius: 5px;
-    border-top-right-radius: 5px;
-    width: 24px;
-}
-
-.tb-manual-test-buttons .tb-test-label {
-    position: relative;
-    top: 0px;
-    line-height: 25px;
-    height: 25px;
-    margin: 0px;
-    padding-left: 2px;
-    padding-right: 2px;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    background: #c4c4c4;
-    color: black;
-}
-
-.tb-manual-test-buttons .tb-test-label.group-label {
-    text-align: center;
-    width: 100px;
-}
-
-.tb-manual-test-buttons .tb-test-label.case-label {
-    text-align: center;
-    width: 40px;
-}
-
-.tb-group-buttons {
-    float: left;
-}
-
-.tb-case-buttons {
-    float: right;
-}
-
-.tb-test-null {
-    width: 350px !important;
-}
-
-.validation-ui-table td,
-.validation-ui-table th {
-    padding-left: 15px;
-    padding-right: 15px;
-    padding-top: 12px;
-    padding-bottom: 12px;
-    text-align: center;
-    min-width: 80px;
-    color: white;
-}
-
-/* Testbench UI styling end */
-
-#plotArea {
-    padding: 3px;
-    width: 100%;
-}
-
-#verilogEditorPanel {
-    width: 220px;
-    font: inherit;
-    display: none;
-    top: 90px;
-    right: 300px;
-}
-
-#moduleProperty-toolTip {
-    padding: 10px;
-}
-
-#moduleProperty-inner {
-    width: 85%;
-    margin: auto;
-}
-
-#moduleProperty-header {
-    font-size: 1.1em;
-    text-transform: uppercase;
-    margin-bottom: 20px;
-    text-align: left;
-}
-
-#moduleProperty-inner > p span {
-    display: inline-block;
-    font-weight: bold;
-}
-
-#moduleProperty-inner > div span {
-    display: inline-block;
-    font-weight: bold;
-}
-
-#moduleProperty-inner > p button {
-    border-radius: 2px;
-    margin: 3px;
-}
-
-#moduleProperty-inner > div button {
-    border-radius: 2px;
-    margin: 3px;
-}
-
-#moduleProperty-inner:last-child {
-    margin-bottom: 15px;
-}
-
-.moduleProperty select {
-    background-color: transparent;
-    border: none;
-    margin-left: 2px;
-    outline: none;
-}
-
-.moduleProperty input,
-.moduleProperty textarea {
-    background-color: transparent;
-    margin-top: 7px;
-    outline: none;
-    padding: 5px 5px;
-    width: 100%;
-}
-
-.moduleProperty textarea {
-    text-align: left;
-}
-
-.moduleProperty select,
-.moduleProperty input,
-.moduleProperty textarea {
-    border-radius: 7px !important;
-}
-
-.moduleProperty input:focus,
-.moduleProperty select:focus,
-.moduleProperty textarea {
-    outline-width: 0;
-    outline: none;
-    box-shadow: none;
-}
-
-.input-group-prepend button {
-    margin-right: 5px;
-}
-.input-group-append button {
-    margin-left: 5px;
-}
-
-.input-group-prepend button:hover {
-    border-radius: 3px !important;
-}
-.input-group-append button:hover {
-    border-radius: 3px !important;
-}
-
 /* toogle */
 
 .switch {
@@ -1062,15 +500,6 @@ input:checked + .slider:before {
     border: solid 1px;
 }
 
-#HelpButton {
-    background-color: transparent;
-    border: 2px solid white;
-    width: 90%;
-    margin-bottom: 15px;
-    margin-top: 15px;
-    font-weight: bold;
-}
-
 .btn-parent {
     width: 100%;
     display: flex;
@@ -1080,23 +509,6 @@ input:checked + .slider:before {
 
 /* custom spin button */
 
-/*! Module property styling starts here */
-
-/** selects styling starts here */
-
-.moduleProperty select {
-    text-align: center;
-    width: 81px;
-    height: 20px;
-    float: right;
-    font-size: 17px;
-    -webkit-appearance: none;
-    -moz-appearance: none;
-    appearance: none;
-}
-
-/*! selects styling end here */
-
 /** layout dialog styling starts here */
 
 .layout-body {
@@ -1106,57 +518,6 @@ input:checked + .slider:before {
     font-weight: bold;
 }
 
-#layoutDialog {
-    /* display: none; */
-    right: 10px;
-    top: 90px;
-    width: 220px;
-}
-
-.layout-title span {
-    display: block;
-    font-weight: bold;
-    margin: 8px;
-}
-
-.layout-title--enable {
-    display: flex;
-    justify-content: space-between;
-    margin: 15px 0;
-    padding: 0 8px;
-}
-
-.Layout-btn {
-    width: 48%;
-    height: 30px;
-    line-height: inherit;
-}
-
-.zoomButton-up {
-    /* background: url(./assets/layout-panel/up.svg) center/cover no-repeat; */
-    display: inline-block;
-    height: 35px;
-    width: 35px;
-}
-.zoomButton-down {
-    /* background: url(./assets/layout-panel/down.svg) center/cover no-repeat; */
-    display: inline-block;
-    height: 35px;
-    width: 35px;
-}
-.zoomButton-left {
-    /* background: url(./assets/layout-panel/left.svg) center/cover no-repeat; */
-    display: inline-block;
-    height: 35px;
-    width: 35px;
-}
-.zoomButton-right {
-    /* background: url(./assets/layout-panel/right.svg) center/cover no-repeat; */
-    display: inline-block;
-    height: 35px;
-    width: 35px;
-}
-
 /*! layout dialog styling ends here */
 
 /** download dialog styling starts here */
@@ -1199,17 +560,6 @@ input:checked + .slider:before {
     visibility: hidden;
 }
 
-.download-dialog-section-2 .btn {
-    color: var(--text-lite);
-}
-.download-dialog-section-2 .btn:hover {
-    color: var(--text-lite);
-}
-
-.download-dialog-section-2 .option {
-    background: transparent;
-}
-
 .custom-radio span {
     height: 20px;
     width: 20px;
@@ -1238,69 +588,6 @@ input:checked + .slider:before {
     transform: translate(-50%, -50%) scale(1);
 }
 
-#saveImageDialog {
-    border-radius: 2px;
-    padding: 13px;
-    margin: 0;
-    margin-top: 15px;
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-    align-items: center;
-    min-height: 188px !important;
-}
-
-.download-dialog-section-2 .option {
-    padding: 0;
-}
-
-.download-dialog-section-1 > label {
-    height: 30px;
-    width: 85px;
-}
-
-.download-dialog-section-2 {
-    background: transparent;
-    width: 100%;
-    display: inline-flex;
-    justify-content: space-around;
-}
-
-.btn-group-toggle {
-    background-color: transparent;
-    overflow: hidden;
-}
-.download-dialog-section-2 .active-btn {
-    box-shadow: none;
-}
-
-.download-dialog-section-2 .btn input[type='radio']:disabled {
-    background: red !important;
-    color: red !important;
-}
-
-.download-dialog-section-2_2 {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-
-.download-dialog-section-3 {
-    border-radius: 2px;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 6px 10px;
-    width: 320px;
-    position: inherit;
-}
-
-.download-dialog-section-3 > label {
-    width: 60px;
-    height: 25px;
-    margin-bottom: 0;
-}
-
 .ui-dialog-buttonpane {
     background: transparent;
 }
@@ -1365,49 +652,6 @@ input:checked + .slider:before {
     height: 35px;
     border-radius: 1px;
 }
-.navbar {
-    transition: background 0.5s ease-out;
-}
-
-.navbar .nav.pull-right {
-    float: right;
-    margin-right: 10px;
-    min-width: 85px;
-}
-
-@media (max-width: 991px) {
-    .navbar .nav.pull-right {
-        display: none;
-    }
-}
-
-@media (max-width: 991px) {
-    .nav-dropdown {
-        text-align: center;
-        padding-top: 20px;
-    }
-}
-
-/*! download dialog styling end here */
-
-/** combinationalAnalysis dialog styling starts here */
-
-.ui-dialog[aria-describedby='combinationalAnalysis'] {
-    width: 460px;
-    min-height: 210px;
-    border: none;
-}
-
-#combinationalAnalysis {
-    margin-top: 10px;
-}
-
-#combinationalAnalysis p input {
-    border: 1px solid white;
-    background: transparent;
-    font: inherit;
-    text-align: center;
-}
 
 .ui-dialog input::placeholder {
     /* Chrome, Firefox, Opera, Safari 10.1+ */
@@ -1415,101 +659,10 @@ input:checked + .slider:before {
     opacity: 0.7; /* Firefox */
 }
 
-#combinationalAnalysis table {
-    width: 460px;
-}
-
-#booleanTable {
-    width: 200px;
-}
-
-.content-table {
-    border-collapse: collapse;
-    font-size: 0.9em;
-    min-width: 400px;
-}
-
-.content-table tr th {
-    font-weight: bold;
-}
-
-.content-table th,
-.content-table td {
-    padding: 5px 15px;
-    margin: 0 3px;
-    width: 20%;
-    border-radius: 2px;
-}
-
-.content-table tbody tr {
-    text-align: center;
-    display: flex;
-    margin-bottom: 4px;
-}
-
-.content-table tbody {
-    display: table-row-group;
-    overflow: auto !important;
-    margin-left: 52px;
-}
-
 .output {
     cursor: pointer;
 }
 
-/*! combinationalAnalysis dialog styling end here */
-
-#setTestbenchData input {
-    border: 1px solid white;
-    background: transparent;
-    text-align: center;
-    font: inherit;
-    color: white;
-}
-
-#setTestbenchData p {
-    font: inherit;
-    color: white;
-}
-
-/** openProjectDialog styling starts here */
-
-#openProjectDialog {
-    display: grid;
-    /* grid-template-columns: 1fr 1fr 1fr; */
-    /* grid-gap: 0 10px; */
-    align-items: center;
-}
-
-#openProjectDialog > label {
-    margin: 4px;
-    padding: 10px;
-    background: transparent;
-    border-radius: 1px;
-    width: 100%;
-}
-
-/*! openProjectDialog styling ends here */
-
-#insertSubcircuitDialog {
-    display: block;
-    padding-bottom: 0;
-    overflow: visible;
-}
-
-#insertSubcircuitDialog > p {
-    margin-bottom: 0;
-}
-
-#insertSubcircuitDialog > label {
-    height: 30px;
-    border-radius: 3px;
-    margin: 0 5px;
-    margin-bottom: 4px;
-    justify-content: center;
-    padding-left: 10px;
-}
-
 #miniMap {
     position: fixed;
     z-index: 3;
@@ -1632,13 +785,6 @@ input:checked + .slider:before {
     cursor: move;
 }
 
-#canvasArea,
-#backgroundArea,
-#simulationArea,
-canvas {
-    /* cursor: wait !important; */
-}
-
 /** Color them dialog styles starts here*/
 
 .ui-dialog[aria-describedby='colorThemesDialog'] {
@@ -1665,39 +811,6 @@ canvas {
     margin-bottom: 0;
 }
 
-.theme {
-    color: white;
-    width: 202.5px;
-    line-height: 30px;
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    user-select: none;
-    margin: 15px;
-    border-radius: 1.5px;
-    transition: all 0.1s ease-out;
-    position: relative;
-    overflow-x: hidden;
-    height: 154px;
-}
-
-.themeNameBox {
-    display: block;
-    width: 100%;
-    cursor: pointer;
-}
-
-.themeSel {
-    background: transparent;
-    display: block;
-    width: 100%;
-    height: 100%;
-    position: absolute;
-}
-
-/*! Color them dialog styles ends here*/
-
-/*! Custom Color theme dialog styles starts here*/
-
 .ui-dialog[aria-describedby='CustomColorThemesDialog'] {
     min-width: 760px;
     -webkit-user-select: none;
@@ -1723,86 +836,6 @@ canvas {
     height: 30px;
 }
 
-/*! Custom Color theme dialog styles ends here*/
-
-.code-window .CodeMirror {
-    height: calc(100vh - 78px);
-    overflow: scroll;
-}
-
-.code-window-embed .CodeMirror {
-    height: 100%;
-    overflow: scroll;
-}
-
-.code-window-embed {
-    position: absolute;
-    top: 28px;
-    height: 100%;
-    width: 100%;
-    overflow: scroll;
-    z-index: 3;
-    display: none;
-}
-
-.code-window {
-    display: none;
-}
-
-#verilogOutput {
-    font-size: 12px;
-}
-
-.embed-fullscreen-btn {
-    border-radius: 3px;
-    width: auto;
-}
-
-#plot {
-    width: 800px;
-}
-
-.timing-diagram-toolbar {
-    padding-left: 4px;
-    padding: 2px;
-    cursor: default;
-}
-
-.timing-diagram-toolbar input {
-    width: 80px;
-    background: transparent !important;
-}
-
-#timing-diagram-log {
-    font-size: 12.5px;
-    padding: 3px;
-    margin-left: 5px;
-    /* margin-bottom: 5px; */
-    border-radius: 3px;
-}
-
-/* CustomColorInput Styles Starts Here */
-.customColorInput {
-    cursor: pointer;
-    width: 30%;
-    height: 30px;
-    overflow: visible;
-    position: relative;
-    top: 8px;
-    appearance: auto;
-    background-color: buttonface;
-    color: buttontext;
-    border-width: 1px;
-    border-style: solid;
-    border-color: buttonborder;
-    border-image: initial;
-    padding: 1px 2px;
-}
-.customColorLabel {
-    width: 60%;
-    height: 30px;
-}
-
 /* Vue Dialog Box Styles STARTS */
 
 .inputField {
@@ -1816,28 +849,6 @@ canvas {
     outline: none;
 }
 
-.cAinput {
-    width: 30%;
-    padding: 0 5px;
-    margin: 8px 0;
-    box-sizing: border-box;
-    border-radius: 5px;
-    border: 1px solid #c5c5c5;
-    color: white;
-    outline: none;
-}
-
-.combinationalAnalysisInput:first-child {
-    padding-top: 20px;
-}
-
-.combinationalAnalysisInput {
-    display: flex;
-    flex-direction: row;
-    justify-content: space-evenly;
-    align-items: baseline;
-}
-
 .inputField:focus {
     border: 2px solid #c5c5c5;
 }
@@ -1854,35 +865,6 @@ canvas {
     margin-bottom: 0.5rem;
 }
 
-/*
-.ProseMirror ul {
-    list-style-type: disc;
-}
-
-.ProseMirror ol {
-    list-style-type: decimal;
-} */
-
-.ProseMirror {
-    height: 12rem;
-    overflow-y: auto;
-    padding-left: 0.5em;
-    padding-right: 0.5em;
-    outline: none;
-}
-
-.fullscreen .ProseMirror {
-    height: 75vh;
-}
-
-/* .ProseMirror ul,
-.ProseMirror ol,
-.ProseMirror li {
-    margin: 0;
-    padding: 0;
-    list-style: inherit;
-} */
-
 .messageBoxContent {
     height: auto;
     width: 760px;
@@ -1903,10 +885,6 @@ canvas {
     }
 }
 
-.tabsbarInput {
-    align-items: center;
-}
-
 .messageBtn {
     width: fit-content;
     min-width: 50px;