diff --git a/src/assets/OpenSans-Light.ttf b/src/assets/OpenSans-Light.ttf
new file mode 100644
index 0000000..6580d3a
Binary files /dev/null and b/src/assets/OpenSans-Light.ttf differ
diff --git a/src/assets/OpenSans-Regular.ttf b/src/assets/OpenSans-Regular.ttf
new file mode 100644
index 0000000..29bfd35
Binary files /dev/null and b/src/assets/OpenSans-Regular.ttf differ
diff --git a/src/assets/OpenSans-SemiBold.ttf b/src/assets/OpenSans-SemiBold.ttf
new file mode 100644
index 0000000..54e7059
Binary files /dev/null and b/src/assets/OpenSans-SemiBold.ttf differ
diff --git a/src/assets/PathwayGothicOne-Regular.ttf b/src/assets/PathwayGothicOne-Regular.ttf
new file mode 100644
index 0000000..c698c6f
Binary files /dev/null and b/src/assets/PathwayGothicOne-Regular.ttf differ
diff --git a/src/components/Chatbox.css b/src/components/Chatbox.css
index d54147e..7b4d0f7 100644
--- a/src/components/Chatbox.css
+++ b/src/components/Chatbox.css
@@ -3,6 +3,7 @@ ion-textarea {
 }
 
 .chat-card {
+  background: var(--ion-color-light);
   height: 100%;
   width: 100%;
   float: right;
@@ -11,6 +12,7 @@ ion-textarea {
 
 .message-toolbar {
   padding-left: 5px;
+  --background: var(--ion-color-light);
 }
 
 .footer-ios ion-toolbar:first-of-type {
diff --git a/src/components/OnlineList.css b/src/components/OnlineList.css
index a3ff405..50c9e53 100644
--- a/src/components/OnlineList.css
+++ b/src/components/OnlineList.css
@@ -7,10 +7,6 @@
   padding-top: 2px;
 }
 
-.online-popover .popover-content {
-  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
-}
-
 .list-header {
   font-size: 24px;
   color: var(--ion-color-primary);
diff --git a/src/components/RoomHeader.css b/src/components/RoomHeader.css
index 465baa5..690c7b3 100644
--- a/src/components/RoomHeader.css
+++ b/src/components/RoomHeader.css
@@ -4,8 +4,6 @@
   padding-left: 15px;
   padding-right: 15px;
   color: var(--ion-color-primary);
-  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
-  font-size: 24px;
   cursor: pointer;
 }
 
diff --git a/src/components/RoomHeader.tsx b/src/components/RoomHeader.tsx
index da4af52..7dc7d22 100644
--- a/src/components/RoomHeader.tsx
+++ b/src/components/RoomHeader.tsx
@@ -36,14 +36,14 @@ const RoomHeader: React.FC<RoomHeaderProps> = ({ roomId, userId, ownerId, videoI
   };
 
   const toHome = () => {
-    history.replace('/');
+    history.push('/');
     history.go(0);
   };
 
   return (
     <IonToolbar>
       <IonTitle slot="start" onClick={toHome} class="title">
-        Turtle
+        TURTLE
       </IonTitle>
       {userId === ownerId ? (
         <>
diff --git a/src/pages/Home.css b/src/pages/Home.css
index 09fc8f7..ef8971f 100644
--- a/src/pages/Home.css
+++ b/src/pages/Home.css
@@ -2,11 +2,14 @@
   width: 50%;
 }
 
+.home-content {
+  --background: var(--ion-color-light-shade);
+}
+
 .home-grid {
   max-width: 500px;
-  font-family: Verdana, Geneva, Tahoma, sans-serif;
-  font-size: 30px;
-  color: var(--ion-color-secondary);
+  font-size: 26px;
+  color: var(--ion-color-primary);
   text-align: center;
 }
 
@@ -15,8 +18,8 @@ ion-toolbar {
 }
 
 ion-title {
-  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
-  font-size: 24px;
+  font-size: 28px;
+  font-style: oblique;
   color: var(--ion-color-primary);
 }
 
@@ -30,7 +33,6 @@ ion-title {
 }
 
 .share-col {
-  margin-top: 10px;
+  margin-top: 8px;
   font-size: 20px;
-  color: var(--ion-color-primary);
 }
diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
index 581db45..c1d735c 100644
--- a/src/pages/Home.tsx
+++ b/src/pages/Home.tsx
@@ -58,10 +58,10 @@ const Home: React.FC = () => {
     <IonPage>
       <IonHeader>
         <IonToolbar>
-          <IonTitle>Turtle</IonTitle>
+          <IonTitle>TURTLE</IonTitle>
         </IonToolbar>
       </IonHeader>
-      <IonContent>
+      <IonContent class="home-content">
         {loading ? (
           <IonContent className="ion-padding">Loading...</IonContent>
         ) : (
diff --git a/src/pages/Room.css b/src/pages/Room.css
index 37d9478..a9502f5 100644
--- a/src/pages/Room.css
+++ b/src/pages/Room.css
@@ -1,4 +1,5 @@
 .room-grid {
+  background: var(--ion-color-light-shade);
   margin-inline-start: 0;
   margin-inline-end: 0;
   height: 100%;
diff --git a/src/theme/variables.css b/src/theme/variables.css
index 8d6ebdc..ac60c7a 100644
--- a/src/theme/variables.css
+++ b/src/theme/variables.css
@@ -72,8 +72,31 @@ http://ionicframework.com/docs/theming/ */
   --ion-color-light-rgb: 244, 245, 248;
   --ion-color-light-contrast: #000000;
   --ion-color-light-contrast-rgb: 0, 0, 0;
-  --ion-color-light-shade: #d7d8da;
+  --ion-color-light-shade: #edeeef;
   --ion-color-light-tint: #f5f6f9;
+
+  --ion-font-family: 'custom';
+}
+
+@font-face {
+  font-family: 'custom';
+  font-style: normal;
+  font-weight: normal;
+  src: url('../assets/OpenSans-Regular.ttf');
+}
+
+@font-face {
+  font-family: 'custom';
+  font-style: normal;
+  font-weight: bold;
+  src: url('../assets/OpenSans-SemiBold.ttf');
+}
+
+@font-face {
+  font-family: 'custom';
+  font-style: oblique;
+  font-weight: normal;
+  src: url('../assets/PathwayGothicOne-Regular.ttf');
 }
 
 @media (prefers-color-scheme: dark) {
@@ -84,65 +107,65 @@ http://ionicframework.com/docs/theming/ */
 
   body {
     --ion-color-primary: #428cff;
-    --ion-color-primary-rgb: 66,140,255;
+    --ion-color-primary-rgb: 66, 140, 255;
     --ion-color-primary-contrast: #ffffff;
-    --ion-color-primary-contrast-rgb: 255,255,255;
+    --ion-color-primary-contrast-rgb: 255, 255, 255;
     --ion-color-primary-shade: #3a7be0;
     --ion-color-primary-tint: #5598ff;
 
     --ion-color-secondary: #50c8ff;
-    --ion-color-secondary-rgb: 80,200,255;
+    --ion-color-secondary-rgb: 80, 200, 255;
     --ion-color-secondary-contrast: #ffffff;
-    --ion-color-secondary-contrast-rgb: 255,255,255;
+    --ion-color-secondary-contrast-rgb: 255, 255, 255;
     --ion-color-secondary-shade: #46b0e0;
     --ion-color-secondary-tint: #62ceff;
 
     --ion-color-tertiary: #6a64ff;
-    --ion-color-tertiary-rgb: 106,100,255;
+    --ion-color-tertiary-rgb: 106, 100, 255;
     --ion-color-tertiary-contrast: #ffffff;
-    --ion-color-tertiary-contrast-rgb: 255,255,255;
+    --ion-color-tertiary-contrast-rgb: 255, 255, 255;
     --ion-color-tertiary-shade: #5d58e0;
     --ion-color-tertiary-tint: #7974ff;
 
     --ion-color-success: #2fdf75;
-    --ion-color-success-rgb: 47,223,117;
+    --ion-color-success-rgb: 47, 223, 117;
     --ion-color-success-contrast: #000000;
-    --ion-color-success-contrast-rgb: 0,0,0;
+    --ion-color-success-contrast-rgb: 0, 0, 0;
     --ion-color-success-shade: #29c467;
     --ion-color-success-tint: #44e283;
 
     --ion-color-warning: #ffd534;
-    --ion-color-warning-rgb: 255,213,52;
+    --ion-color-warning-rgb: 255, 213, 52;
     --ion-color-warning-contrast: #000000;
-    --ion-color-warning-contrast-rgb: 0,0,0;
+    --ion-color-warning-contrast-rgb: 0, 0, 0;
     --ion-color-warning-shade: #e0bb2e;
     --ion-color-warning-tint: #ffd948;
 
     --ion-color-danger: #ff4961;
-    --ion-color-danger-rgb: 255,73,97;
+    --ion-color-danger-rgb: 255, 73, 97;
     --ion-color-danger-contrast: #ffffff;
-    --ion-color-danger-contrast-rgb: 255,255,255;
+    --ion-color-danger-contrast-rgb: 255, 255, 255;
     --ion-color-danger-shade: #e04055;
     --ion-color-danger-tint: #ff5b71;
 
     --ion-color-dark: #f4f5f8;
-    --ion-color-dark-rgb: 244,245,248;
+    --ion-color-dark-rgb: 244, 245, 248;
     --ion-color-dark-contrast: #000000;
-    --ion-color-dark-contrast-rgb: 0,0,0;
+    --ion-color-dark-contrast-rgb: 0, 0, 0;
     --ion-color-dark-shade: #d7d8da;
     --ion-color-dark-tint: #f5f6f9;
 
     --ion-color-medium: #989aa2;
-    --ion-color-medium-rgb: 152,154,162;
+    --ion-color-medium-rgb: 152, 154, 162;
     --ion-color-medium-contrast: #000000;
-    --ion-color-medium-contrast-rgb: 0,0,0;
+    --ion-color-medium-contrast-rgb: 0, 0, 0;
     --ion-color-medium-shade: #86888f;
     --ion-color-medium-tint: #a2a4ab;
 
     --ion-color-light: #222428;
-    --ion-color-light-rgb: 34,36,40;
+    --ion-color-light-rgb: 34, 36, 40;
     --ion-color-light-contrast: #ffffff;
-    --ion-color-light-contrast-rgb: 255,255,255;
+    --ion-color-light-contrast-rgb: 255, 255, 255;
     --ion-color-light-shade: #1e2023;
     --ion-color-light-tint: #383a3e;
   }
@@ -154,10 +177,10 @@ http://ionicframework.com/docs/theming/ */
 
   .ios body {
     --ion-background-color: #000000;
-    --ion-background-color-rgb: 0,0,0;
+    --ion-background-color-rgb: 0, 0, 0;
 
     --ion-text-color: #ffffff;
-    --ion-text-color-rgb: 255,255,255;
+    --ion-text-color-rgb: 255, 255, 255;
 
     --ion-color-step-50: #0d0d0d;
     --ion-color-step-100: #1a1a1a;
@@ -186,7 +209,6 @@ http://ionicframework.com/docs/theming/ */
     --ion-card-background: #1c1c1d;
   }
 
-
   /*
    * Material Design Dark Theme
    * -------------------------------------------
@@ -194,10 +216,10 @@ http://ionicframework.com/docs/theming/ */
 
   .md body {
     --ion-background-color: #121212;
-    --ion-background-color-rgb: 18,18,18;
+    --ion-background-color-rgb: 18, 18, 18;
 
     --ion-text-color: #ffffff;
-    --ion-text-color-rgb: 255,255,255;
+    --ion-text-color-rgb: 255, 255, 255;
 
     --ion-border-color: #222222;