diff --git a/styles.css b/styles.css
index eb28235..f708446 100644
--- a/styles.css
+++ b/styles.css
@@ -1,52 +1,64 @@
-/* styles.css */
-
 body {
   margin: 0;
   padding: 0;
   font-family: 'Courier New', monospace;
+  background-color: #282c34; /* Night mode background color */
+  color: #abb2bf;
+}
+
+#editor-container {
+  display: flex;
+  height: 100vh;
 }
 
-textarea {
-  width: 100%;
+#code {
+  flex: 1;
   height: 100%;
-  resize: none;
+  font-size: 16px;
+  background-color: #1e1e1e; /* Night mode code editor background color */
+  color: #abb2bf;
   border: none;
   outline: none;
-  font-size: 16px;
-}
-
-.tab-container {
-  width: 100%;
-  text-align: center;
-  background-color: #2c303c;
-  padding: 10px 0;
+  padding: 10px;
 }
 
-.tab {
+#run-button {
+  width: 80px;
+  height: 100%;
+  font-size: 16px;
+  background-color: #61afef;
+  color: #282c34; /* Night mode button text color */
+  border: none;
   cursor: pointer;
   transition: background-color 0.3s;
-  padding: 8px 16px;
-  color: #ffffff;
 }
 
-.tab:hover {
-  background-color: #3a3e4c;
+#run-button:hover {
+  background-color: #4b8bbe;
 }
 
-.tab.active {
-  background-color: #61afef;
-  color: #282c34; /* Active tab text color */
+#output {
+  flex: 1;
+  height: 100%;
+  padding: 10px;
+  border: 1px solid #abb2bf;
+  background-color: #1e1e1e; /* Night mode output background color */
+  overflow-y: auto;
 }
 
-#run-button {
-  background-color: #3498db;
-  color: #ffffff;
-  padding: 10px;
-  border: none;
-  border-radius: 5px;
-  cursor: pointer;
+/* Day mode styles (add more styles as needed) */
+body.day-mode {
+  background-color: #f5f5f5;
+  color: #333;
 }
 
-#run-button:hover {
-  background-color: #2980b9;
+#code.day-mode {
+  background-color: #fff;
+  color: #333;
+}
+
+#output.day-mode {
+  background-color: #fff;
+  color: #333;
+  border-color: #ddd;
 }