diff --git a/public/css/app.css b/public/css/app.css
index 659737d..00b9a2e 100644
--- a/public/css/app.css
+++ b/public/css/app.css
@@ -1,4 +1,4 @@
-@import url(https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap);
+@import url(https://fonts.cdnfonts.com/css/satoshi);
 @charset "UTF-8";
 /*!
  * Bootstrap  v5.3.3 (https://getbootstrap.com/)
@@ -72,7 +72,7 @@
   --bs-dark-border-subtle: #adb5bd;
   --bs-white-rgb: 255, 255, 255;
   --bs-black-rgb: 0, 0, 0;
-  --bs-font-sans-serif: "Inter", sans-serif;
+  --bs-font-sans-serif: "Satoshi", sans-serif;
   --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
   --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
   --bs-body-font-family: var(--bs-font-sans-serif);
diff --git a/resources/sass/_variables.scss b/resources/sass/_variables.scss
index fe7bb69..4c4bf85 100644
--- a/resources/sass/_variables.scss
+++ b/resources/sass/_variables.scss
@@ -48,6 +48,6 @@ $font-weight-bold:            700;
 $font-weight-bolder:          800;
 
 // Typography
-$font-family-sans-serif: 'Inter', sans-serif;
+$font-family-sans-serif: 'Satoshi', sans-serif;
 $font-size-base: 0.9rem;
 $line-height-base: 1.6;
diff --git a/resources/sass/app.scss b/resources/sass/app.scss
index 213fb15..30b8f15 100644
--- a/resources/sass/app.scss
+++ b/resources/sass/app.scss
@@ -1,5 +1,5 @@
 // Fonts
-@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
+@import url('https://fonts.cdnfonts.com/css/satoshi');
 
 // Variables
 @import 'variables';
diff --git a/resources/views/styleguide.blade.php b/resources/views/styleguide.blade.php
new file mode 100644
index 0000000..f2d66b6
--- /dev/null
+++ b/resources/views/styleguide.blade.php
@@ -0,0 +1,86 @@
+<div class="container">
+    <h1 class="my-4">Siyenshop Style Guide</h1>
+
+    <!-- Buttons -->
+    <div class="style-guide-section">
+        <h2>Buttons</h2>
+        <button class="btn btn-primary">Primary Button</button>
+        <button class="btn btn-secondary">Secondary Button</button>
+        <button class="btn btn-success">Success Button</button>
+        <button class="btn btn-danger">Danger Button</button>
+        <button class="btn btn-warning">Warning Button</button>
+        <button class="btn btn-info">Info Button</button>
+        <button class="btn btn-light">Light Button</button>
+        <button class="btn btn-dark">Dark Button</button>
+    </div>
+
+    <!-- Colors -->
+    <div class="style-guide-section">
+        <h2>Colors</h2>
+        <div class="p-3 mb-2 bg-primary text-white">Primary</div>
+        <div class="p-3 mb-2 bg-secondary text-white">Secondary</div>
+        <div class="p-3 mb-2 bg-success text-white">Success</div>
+        <div class="p-3 mb-2 bg-danger text-white">Danger</div>
+        <div class="p-3 mb-2 bg-warning text-dark">Warning</div>
+        <div class="p-3 mb-2 bg-info text-white">Info</div>
+        <div class="p-3 mb-2 bg-light text-dark">Light</div>
+        <div class="p-3 mb-2 bg-dark text-white">Dark</div>
+    </div>
+
+    <!-- Font Sizes -->
+    <div class="style-guide-section">
+        <h2>Font Sizes</h2>
+        <p class="fs-1">fs-1</p>
+        <p class="fs-2">fs-2</p>
+        <p class="fs-3">fs-3</p>
+        <p class="fs-4">fs-4</p>
+        <p class="fs-5">fs-5</p>
+        <p class="fs-6">fs-6</p>
+        <p class="fs-7">fs-7</p>
+        <p class="fs-8">fs-8</p>
+        <p class="fs-9">fs-9</p>
+        <p class="fs-10">fs-10</p>
+        <p class="fs-11">fs-11</p>
+        <p class="fs-12">fs-12</p>
+        <p class="fs-13">fs-13</p>
+        <p class="fs-14">fs-14</p>
+        <p class="fs-15">fs-15</p>
+
+        <p>Normal text</p>
+    </div>
+
+    <!-- Font Weights -->
+    <div class="style-guide-section">
+        <h2>Font Weights</h2>
+        <p class="fw-lighter fs-5">lighter text</p>
+        <p class="fw-light fs-5">light text</p>
+        <p class="fw-normal fs-5">normal text</p>
+        <p class="fw-medium fs-5">medium text</p>
+        <p class="fw-semibold fs-5">semibold text</p>
+        <p class="fw-bold fs-5">bold text</p>
+        <p class="fw-bolder fs-5">bolder text</p>
+
+       
+    </div>
+
+    <!-- Input Fields -->
+    <div class="style-guide-section">
+        <h2>Input Fields</h2>
+        <form>
+            <div class="form-group">
+                <label for="exampleInputEmail1">Email address</label>
+                <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
+            </div>
+            <div class="form-group">
+                <label for="exampleInputPassword1">Password</label>
+                <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
+            </div>
+            <div class="form-group form-check">
+                <input type="checkbox" class="form-check-input" id="exampleCheck1">
+                <label class="form-check-label" for="exampleCheck1">Check me out</label>
+            </div>
+            <button type="submit" class="btn btn-primary">Submit</button>
+        </form>
+    </div>
+</div>
+
diff --git a/resources/views/welcome.blade.php b/resources/views/welcome.blade.php
index 38de1a7..80ed561 100644
--- a/resources/views/welcome.blade.php
+++ b/resources/views/welcome.blade.php
@@ -13,22 +13,7 @@
     <body class="antialiased">
         @include('components.navbar')
 
-        <p class="fs-1 ">hello world</p>
-        <p class="fs-2">hello world</p>
-        <p class="fs-3">hello world</p>
-        <p class="fs-4">hello world</p>
-        <p class="fs-5">hello world</p>
-        <p class="fs-6">hello world</p>
-        <p class="fs-7">hello world</p>
-        <p class="fs-8 fw-semibold">hello world</p>
-        <p class="fs-9 fw-bolder">hello world</p>
-        <p class="fs-10 fw-bold">hello world</p>
-        <p class="fs-11 fw-medium">hello world</p>
-        <p class="fs-12">hello world</p>
-        <p class="fs-13">hello world</p>
-        <p class="fs-14">hello world</p>
-        <p class="fs-15">hello world</p>
-
-
+        {{-- delete if landing page is ready --}}
+        @include('styleguide')
     </body>
 </html>