diff --git a/src/app/header/header.component.html b/src/app/header/header.component.html
index 3b2a763..f297f86 100644
--- a/src/app/header/header.component.html
+++ b/src/app/header/header.component.html
@@ -1,6 +1,6 @@
 <div [ngClass]="[mode]" class="header">
     <div>
-        <h1>Ipv4 Converter</h1>
+        <h1 #hover (mouseenter)="onMouseEnter(hover)" (mouseleave)="onMouseOut(hover)">Ipv4 Converter</h1>
         <mat-slide-toggle class="toggle" (toggleChange)="stylemode()">{{toggleText}} </mat-slide-toggle>
     </div>
 
diff --git a/src/app/header/header.component.ts b/src/app/header/header.component.ts
index 1097526..805b383 100644
--- a/src/app/header/header.component.ts
+++ b/src/app/header/header.component.ts
@@ -13,6 +13,15 @@ export class HeaderComponent implements OnInit {
 
 
 
+  }
+
+  onMouseEnter(hover: HTMLElement) {
+    hover.style.color = "red";
+
+  }
+  onMouseOut(hover: HTMLElement) {
+    hover.style.color = "black";
+
   }
   stylemode() {
     switch (this.toggle) {
diff --git a/src/app/output/output.component.html b/src/app/output/output.component.html
index 9db47f4..c2e4fa7 100644
--- a/src/app/output/output.component.html
+++ b/src/app/output/output.component.html
@@ -1,54 +1,56 @@
-<div class="card">
-    <label class="label">Ipv4</label>
-    <div>
-        <p><label class="outlabel">Ip:</label></p>
-        <p><label class="output">{{service.bin_dec_dict.Ipv4.dec}}</label></p>
-        <p><label class="outlabel">Binary:</label></p>
-        <p><label class="output">{{service.bin_dec_dict.Ipv4.bin}}</label></p>
+<div class="body">
+    <div class="card">
+        <label class="label">Ipv4</label>
+        <div>
+            <p><label class="outlabel">Ip:</label></p>
+            <p><label class="output">{{service.bin_dec_dict.Ipv4.dec}}</label></p>
+            <p><label class="outlabel">Binary:</label></p>
+            <p><label class="output">{{service.bin_dec_dict.Ipv4.bin}}</label></p>
+        </div>
     </div>
-</div>
-<div class="card">
-    <label class="label">Subnet Mask</label>
-    <div>
-        <p><label class="outlabel">Ip:</label></p>
-        <p><label>{{service.bin_dec_dict.Subnet.dec}}</label></p>
-        <p><label class="outlabel">Binary:</label></p>
-        <p><label>{{service.bin_dec_dict.Subnet.bin}}</label></p>
+    <div class="card">
+        <label class="label">Subnet Mask</label>
+        <div>
+            <p><label class="outlabel">Ip:</label></p>
+            <p><label>{{service.bin_dec_dict.Subnet.dec}}</label></p>
+            <p><label class="outlabel">Binary:</label></p>
+            <p><label>{{service.bin_dec_dict.Subnet.bin}}</label></p>
+        </div>
     </div>
-</div>
-<div class="card">
-    <label class="label">Broadcast</label>
-    <div>
-        <p><label class="outlabel">Ip:</label></p>
-        <p><label>{{service.bin_dec_dict.Broadcast.dec}}</label></p>
-        <p><label class="outlabel">Binary:</label></p>
-        <p><label>{{service.bin_dec_dict.Broadcast.bin}}</label></p>
+    <div class="card">
+        <label class="label">Broadcast</label>
+        <div>
+            <p><label class="outlabel">Ip:</label></p>
+            <p><label>{{service.bin_dec_dict.Broadcast.dec}}</label></p>
+            <p><label class="outlabel">Binary:</label></p>
+            <p><label>{{service.bin_dec_dict.Broadcast.bin}}</label></p>
+        </div>
     </div>
-</div>
-<div class="card">
-    <label class="label">NetID</label>
-    <div>
-        <p><label class="outlabel">Ip:</label></p>
-        <p><label>{{service.bin_dec_dict.NetID.dec}}</label></p>
-        <p><label class="outlabel">Binary:</label></p>
-        <p><label>{{service.bin_dec_dict.NetID.bin}}</label></p>
+    <div class="card">
+        <label class="label">NetID</label>
+        <div>
+            <p><label class="outlabel">Ip:</label></p>
+            <p><label>{{service.bin_dec_dict.NetID.dec}}</label></p>
+            <p><label class="outlabel">Binary:</label></p>
+            <p><label>{{service.bin_dec_dict.NetID.bin}}</label></p>
+        </div>
     </div>
-</div>
-<div class="card">
-    <label class="label">First Ip</label>
-    <div>
-        <p><label class="outlabel">Ip:</label></p>
-        <p><label>{{service.bin_dec_dict.FirstIP.dec}}</label></p>
-        <p><label class="outlabel">Binary:</label></p>
-        <p><label>{{service.bin_dec_dict.FirstIP.bin}}</label></p>
+    <div class="card">
+        <label class="label">First Ip</label>
+        <div>
+            <p><label class="outlabel">Ip:</label></p>
+            <p><label>{{service.bin_dec_dict.FirstIP.dec}}</label></p>
+            <p><label class="outlabel">Binary:</label></p>
+            <p><label>{{service.bin_dec_dict.FirstIP.bin}}</label></p>
+        </div>
     </div>
-</div>
-<div class="card">
-    <label class="label">Last Ip</label>
-    <div>
-        <p><label class="outlabel">Ip:</label></p>
-        <p><label>{{service.bin_dec_dict.LastIP.dec}}</label></p>
-        <p><label class="outlabel">Binary:</label></p>
-        <p><label>{{service.bin_dec_dict.LastIP.bin}}</label></p>
+    <div class="card">
+        <label class="label">Last Ip</label>
+        <div>
+            <p><label class="outlabel">Ip:</label></p>
+            <p><label>{{service.bin_dec_dict.LastIP.dec}}</label></p>
+            <p><label class="outlabel">Binary:</label></p>
+            <p><label>{{service.bin_dec_dict.LastIP.bin}}</label></p>
+        </div>
     </div>
 </div>
\ No newline at end of file
diff --git a/src/app/output/output.component.scss b/src/app/output/output.component.scss
index ad19958..939f338 100644
--- a/src/app/output/output.component.scss
+++ b/src/app/output/output.component.scss
@@ -14,6 +14,7 @@
     margin-left: 5px;
     margin-right: 5px;
 
+
 }
 
 .label {
@@ -25,8 +26,4 @@
 .outlabel {
     width: 20px;
     margin-right: 100px;
-}
-
-body {
-    background-color: black;
 }
\ No newline at end of file