diff --git a/src/assets/fonts.css b/src/assets/fonts.css
new file mode 100644
index 0000000..3d467c5
--- /dev/null
+++ b/src/assets/fonts.css
@@ -0,0 +1,60 @@
+
+@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Geologica:wght@400;600;700&display=swap');
+
+/* DESKTOP Heading 1: Geologica - Regular */
+.heading {
+font-family: 'Geologica', sans-serif;
+font-size: 55px;
+font-weight: normal;
+}
+
+/* DEKSTOP Heading 1: Geologica - SemiBold */
+.heading-semi {
+font-family: 'Geologica', sans-serif;
+font-size: 55px;
+font-weight: 600;
+}
+
+/* DESKTOP Heading 2: Lato - Regular */
+.subheading {
+font-family: 'Lato', sans-serif;
+font-size: 43px;
+font-weight: normal;
+}
+
+/* DESKTOP Heading 2: Lato - Bold */
+.subheading_semi {
+font-family: 'Lato', sans-serif;
+font-size: 43px;
+font-weight: bold;
+}
+
+/* DESKTOP Heading 3: Lato - Regular */
+.tertiary{
+font-family: 'Lato', sans-serif;
+font-size: 37px;
+font-weight: normal;
+}
+
+/* DESKTOP Heading 3: Lato - Bold */
+.tertiary-semi{
+font-family: 'Lato', sans-serif;
+font-size: 37px;
+font-weight: bold;
+}
+
+/* DESKTOP Heading 4: Lato - Regular */
+.quarternary{
+font-family: 'Lato', sans-serif;
+font-size: 29px;
+font-weight: normal;
+}
+
+/* DESKTOP Heading 4: Lato - Bold */
+.quarternary-semi{
+font-family: 'Lato', sans-serif;
+font-size: 29px;
+font-weight: bold;
+}
+
diff --git a/src/components/Test.tsx b/src/components/Test.tsx
index a15db4a..d69c606 100644
--- a/src/components/Test.tsx
+++ b/src/components/Test.tsx
@@ -1,3 +1,11 @@
+// Test.jsx or Test.astro (React-style component example)
 export default function Test() {
-  return <div>Testing 123... </div>;
+  return (
+    <div>
+      <h1>Geologica Headingggg</h1>
+     
+      <h2>Lato Subheading</h2>
+      <p>Check the styles applied to h1 and h2 elements.</p>
+    </div>
+  );
 }
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index e455c61..f729286 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -1,22 +1,22 @@
-<!doctype html>
 <html lang="en">
-	<head>
-		<meta charset="UTF-8" />
-		<meta name="viewport" content="width=device-width" />
-		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
-		<meta name="generator" content={Astro.generator} />
-		<title>Astro Basics</title>
-	</head>
-	<body>
-		<slot />
-	</body>
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width" />
+    <title>Astro Test Page</title>
+    <link href="https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Geologica:wght@400;700&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="/src/assets/fonts.css" />
+  </head>
+  <body>
+    <div>
+      <h1 class="heading_bold">Geologica Heading</h1>
+      <h2 class="subheading-semi">TEST</h2>
+      <h3 class="heading-bold"> TESTING </h3>
+
+    </div>
+  </body>
 </html>
 
-<style>
-	html,
-	body {
-		margin: 0;
-		width: 100%;
-		height: 100%;
-	}
-</style>
+
+
+
