diff --git a/data-source/index.html b/data-source/index.html
index 03d2f1d..effa66c 100644
--- a/data-source/index.html
+++ b/data-source/index.html
@@ -6,6 +6,9 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Data Glossary: Hard Power vs Soft Power</title>
     <link rel="stylesheet" href="styles.css">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&display=swap" rel="stylesheet">
 </head>
 <body>
     <h1>Glossary & Data Source</h1>
diff --git a/data-source/styles.css b/data-source/styles.css
index 01741d9..2c0d819 100644
--- a/data-source/styles.css
+++ b/data-source/styles.css
@@ -1,6 +1,26 @@
+/* styles.css */
+
+/* Set background */
+html {
+  background-color: #264653;
+}
+
+/* styles for the body of the site */
+body {
+  font-family: 'Lato', sans-serif;
+  width: 80%;
+  background-color: #E9C46A;
+  border: 10px solid #E76F51;
+  padding: 20px 20px 20px 20px;
+  margin-top: auto;
+  margin-left: auto;
+  margin-right: auto;
+  margin-bottom: auto;
+  text-align: center;
+}
 
 body {
-    font-family: Arial, sans-serif;
+    font-family: 'Lato', sans-serif;
     line-height: 1.6;
     padding: 20px;
     background-color: #FFFFFF; /* White background */
@@ -10,6 +30,7 @@ body {
 h1 {
     text-align: center;
     color: #264653;
+    font-family: 'Lato';
 }
 
 .accordion {
@@ -19,6 +40,7 @@ h1 {
     box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
     padding: 0;
     border-radius: 8px;
+    font-family: 'Lato', sans-serif;
 }
 
 .accordion-item {
@@ -26,6 +48,7 @@ h1 {
     color: #264653;
     margin-bottom: 1em;
     border-bottom: 1px solid #2A9D8F;
+    font-family: 'Lato', sans-serif;
 }
 
 .accordion-button {
@@ -38,21 +61,25 @@ h1 {
     border: none;
     outline: none;
     transition: background 0.3s ease;
+    font-family: 'Lato', sans-serif;
 }
 
 .accordion-button:hover {
     background: #2A9D8F;
     color: #FFFFFF;
+    font-family: 'Lato', sans-serif;
 }
 
 .accordion-content {
     display: none;
     padding: 20px;
+    font-family: 'Lato', sans-serif;
 }
 
 .variable-item {
     padding-bottom: 15px;
     margin-bottom: 15px;
+    font-family: 'Lato', sans-serif;
 }
 
 .variable-button {
@@ -67,11 +94,13 @@ h1 {
     transition: background 0.3s ease;
     margin: 10px 0;
     display: block;
+    font-family: 'Lato', sans-serif;
 }
 
 .variable-button:hover {
     background: #F4A261;
     color: #FFFFFF;
+    font-family: 'Lato', sans-serif;
 }
 
 .variable-content {
@@ -81,6 +110,7 @@ h1 {
     border-left: 1px solid #E9C46A;
     border-right: 1px solid #E9C46A;
     border-bottom: 1px solid #E9C46A;
+    font-family: 'Lato', sans-serif;
 }
 
 .plus {
@@ -88,6 +118,7 @@ h1 {
     font-size: 1.5em;
     line-height: 0.5em;
     color: #264653;
+    font-family: 'Lato', sans-serif;
 }
 
 a {
