diff --git a/src/app/components/main/main.component.css b/src/app/components/main/main.component.css
index 6d158ac..a580d91 100644
--- a/src/app/components/main/main.component.css
+++ b/src/app/components/main/main.component.css
@@ -1,6 +1,6 @@
 #tools{
     height: 100vh;
-    width: 100%;
+    width: 30%;
     display: flex;
     justify-content: center;
     align-items: center;
@@ -9,9 +9,15 @@
 
 .tools{
     margin:1em;
+    width: 100%;
 }
 @media only screen and (max-width: 600px) {
     #tools{
-        width: 40%;
+        width: 100%;
+    }
+
+    .tools{
+        margin:1em;
+        width: 90%;
     }
 }
\ No newline at end of file
diff --git a/src/app/components/main/main.component.html b/src/app/components/main/main.component.html
index 3748a26..29a2ffe 100644
--- a/src/app/components/main/main.component.html
+++ b/src/app/components/main/main.component.html
@@ -1,4 +1,6 @@
-<div id="tools">
-    <button class="tools" id="trim" mat-raised-button routerLink="trim">Trim</button>
-    <button class="tools" id="unixtime" mat-raised-button routerLink="unixtime">Unix timestamp converter</button>
+<div class="center">
+    <div id="tools">
+        <button class="tools" id="trim" mat-raised-button routerLink="trim">Trim</button>
+        <button class="tools" id="unixtime" mat-raised-button routerLink="unixtime">Unix timestamp converter</button>
+    </div>
 </div>
\ No newline at end of file
diff --git a/src/styles.css b/src/styles.css
index 7e7239a..579a1b7 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -2,3 +2,8 @@
 
 html, body { height: 100%; }
 body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }
+
+.center{
+    display: flex;
+    justify-content: center;
+}
\ No newline at end of file