diff --git a/frontend/src/app/messages/messages.component.html b/frontend/src/app/messages/messages.component.html
index 1381827..adde0bf 100644
--- a/frontend/src/app/messages/messages.component.html
+++ b/frontend/src/app/messages/messages.component.html
@@ -6,7 +6,7 @@
                 <div class="border border-gray-200 w-[600px]">
                 <!-- Header -->
                 <div class="sticky flex items-center bg-slate-50 border-b border-slate-200 px-4 sm:px-6 md:px-5 h-16">
-                    <div class="flex items-center text-xl text-indigo-500 bg-slate-50 border-b border-slate-200 px-4 sm:px-6 md:px-5 h-16">
+                    <div class="flex items-center font-Inter text-xl text-indigo-500 bg-slate-50 border-b border-slate-200 px-4 sm:px-6 md:px-5 h-16">
                         Lexi, an AI assistant
                     </div>
                 </div>
diff --git a/frontend/src/index.html b/frontend/src/index.html
index 3af61ec..a358355 100644
--- a/frontend/src/index.html
+++ b/frontend/src/index.html
@@ -6,8 +6,11 @@
   <base href="/">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
+  <link rel="preconnect" href="https://fonts.gstatic.com">
+  <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
 </head>
-<body>
+<body class="antialiased ">
   <app-root></app-root>
 </body>
 </html>
diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
index eeced4e..e953bc7 100644
--- a/frontend/tailwind.config.js
+++ b/frontend/tailwind.config.js
@@ -2,6 +2,13 @@
 module.exports = {
   content: ['./src/**/*.{html,ts}'],
   theme: {
+    fontFamily: {
+      inter: ['Inter', 'sans-serif'],
+      'architects-daughter': ['"Architects Daughter"', 'sans-serif'],
+    },
+    fontSmoothing: {
+      antialiased: true
+    },
     extend: {},
   },
   plugins: [],
