diff --git a/.github/dependabot.yml b/.github/dependabot.yml
index 1f738ef3..76450ed8 100644
--- a/.github/dependabot.yml
+++ b/.github/dependabot.yml
@@ -2,15 +2,14 @@
 
 version: 2
 updates:
-
   # Maintain dependencies for GitHub Actions
-  - package-ecosystem: "github-actions"
-    directory: "/"
+  - package-ecosystem: 'github-actions'
+    directory: '/'
     schedule:
-      interval: "daily"
+      interval: 'daily'
 
-  # Maintain dependencies for Submodule (in case you need it in the future.)
-  - package-ecosystem: "gitsubmodule"
-    directory: "/"
-    schedule:
-      interval: "daily"
\ No newline at end of file
+  # # Maintain dependencies for Submodule (in case you need it in the future.)
+  # - package-ecosystem: "gitsubmodule"
+  #   directory: "/"
+  #   schedule:
+  #     interval: "daily"
diff --git a/.github/workflows/delete_workflows.yml b/.github/workflows/delete_workflows.yml
new file mode 100644
index 00000000..2ac2427f
--- /dev/null
+++ b/.github/workflows/delete_workflows.yml
@@ -0,0 +1,44 @@
+name: Delete old workflow runs
+on:
+  workflow_dispatch:
+    inputs:
+      days:
+        description: 'Number of days.'
+        required: true
+        default: 7
+      minimum_runs:
+        description: 'The minimum runs to keep for each workflow.'
+        required: true
+        default: 3
+      delete_workflow_pattern:
+        description: 'The name or filename of the workflow. if not set then it will target all workflows.'
+        required: false
+      delete_workflow_by_state_pattern:
+        description: 'Remove workflow by state: active, deleted, disabled_fork, disabled_inactivity, disabled_manually'
+        required: true
+        default: 'All'
+        type: choice
+        options:
+          - 'All'
+          - active
+          - deleted
+          - disabled_inactivity
+          - disabled_manually
+      dry_run:
+        description: 'Only log actions, do not perform any delete operations.'
+        required: false
+
+jobs:
+  del_runs:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Delete workflow runs
+        uses: Mattraks/delete-workflow-runs@v2
+        with:
+          token: ${{ github.token }}
+          repository: ${{ github.repository }}
+          retain_days: ${{ github.event.inputs.days }}
+          keep_minimum_runs: ${{ github.event.inputs.minimum_runs }}
+          delete_workflow_pattern: ${{ github.event.inputs.delete_workflow_pattern }}
+          delete_workflow_by_state_pattern: ${{ github.event.inputs.delete_workflow_by_state_pattern }}
+          dry_run: ${{ github.event.inputs.dry_run }}
diff --git a/.github/workflows/linting.yml b/.github/workflows/linting.yml
index b2e2ae66..7509972d 100644
--- a/.github/workflows/linting.yml
+++ b/.github/workflows/linting.yml
@@ -25,8 +25,9 @@ jobs:
       - name: Run Super-Linter with detailed output
         uses: super-linter/super-linter/slim@latest
         env:
-          LINTER_RULES_PATH: /
+          LINTER_RULES_PATH: /linting-rules
           MARKDOWN_CONFIG_FILE: .markdown-lint.yml
+          CSS_FILE_NAME: .stylelintrc.yml
           VALIDATE_ALL_CODEBASE: false
           VALIDATE_MARKDOWN: true
           FIX_MARKDOWN: true
diff --git a/.gitignore b/.gitignore
index 8a30d258..0294f487 100644
--- a/.gitignore
+++ b/.gitignore
@@ -396,3 +396,13 @@ FodyWeavers.xsd
 
 # JetBrains Rider
 *.sln.iml
+
+# Dot files
+.prettierrc
+.markdownlint.json
+
+# Vscode extra
+extensions.json
+terminals.json
+package.json
+package-lock.json
diff --git a/css/style.css b/css/style.css
index 57cf650b..5f6fc55b 100644
--- a/css/style.css
+++ b/css/style.css
@@ -1,4 +1,20 @@
-/* Gece/gündüz modu  */
+/*  Don't change the CSS manually. SCSS automatically generates style.css and *map files. SCSS is a CSS pre-processor */
+@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.1/css/all.min.css");
+@import url("https://fonts.cdnfonts.com/css/inter");
+body {
+  font-family: "Inter", sans-serif;
+}
+
+p {
+  text-align: justify;
+}
+
+* {
+  padding: 0;
+  margin: 0;
+  box-sizing: border-box;
+}
+
 .switch {
   display: block;
   --width-of-switch: 3.5em;
@@ -12,7 +28,6 @@
   right: 20px;
   z-index: 999;
 }
-
 .switch input {
   opacity: 0;
   width: 0;
@@ -22,20 +37,16 @@
 .slider {
   position: absolute;
   cursor: pointer;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
+  inset: 0;
   background-color: #f4f4f5;
   transition: 0.4s;
   border-radius: 30px;
 }
-
 .slider:before {
   position: absolute;
-  content: '';
-  height: var(--size-of-icon);
+  content: "";
   width: var(--size-of-icon);
+  height: var(--size-of-icon);
   border-radius: 20px;
   left: var(--slider-offset);
   top: 50%;
@@ -47,21 +58,12 @@
 input:checked + .slider {
   background-color: #303136;
 }
-
 input:checked + .slider:before {
   left: calc(100% - (var(--size-of-icon) + var(--slider-offset)));
   background: #303136;
   box-shadow: inset -3px -2px 5px -2px #8983f7, inset -10px -4px 0 0 #a3dafb;
 }
 
-/* Font */
-body {
-  font-family: 'Inter', sans-serif;
-}
-
-/* ------ */
-
-/* Uygulama kutucuğu */
 .custom-box {
   border: 1px solid;
   border-radius: 8px;
@@ -71,15 +73,20 @@ body {
   flex-direction: row;
   align-items: center;
 }
-
-/* Logo */
 .custom-box img {
   width: 70px;
   height: 70px;
   margin-right: 16px;
 }
-
-/* Başlık */
+.custom-box .description {
+  font-size: 14px;
+  color: inherit;
+}
+.custom-box .icon-group {
+  display: flex;
+  gap: 8px;
+  margin-top: 8px;
+}
 .custom-box .title {
   font-size: 18px;
   font-weight: bold;
@@ -87,15 +94,55 @@ body {
   text-decoration: none;
   margin-bottom: 8px;
 }
+.custom-box .title:hover {
+  text-decoration: none;
+}
 
-/* Başlık */
+.service-container {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 16px;
+}
+.service-box {
+  border: 1px solid;
+  border-radius: 8px;
+  padding: 16px;
+  width: calc(50% - 16px);
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  transition: background-color 0.3s, border-color 0.3s, color 0.3s;
+}
+.service-box img {
+  width: 50px;
+  height: auto;
+}
 .service-box .title {
   font-size: 18px;
   font-weight: bold;
   color: #0b87da;
 }
 
-/* Başlık */
+.criteria {
+  border: 1px solid;
+  border-radius: 8px;
+  padding: 16px;
+  margin: 16px 0;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+.criteria i {
+  color: #0b87da;
+  font-size: 56px;
+  margin-right: 25px;
+}
+.criteria .description {
+  font-size: 14px;
+  color: inherit;
+  margin-top: 8px;
+}
 .criteria .title {
   font-size: 18px;
   font-weight: bold;
@@ -103,45 +150,58 @@ body {
   text-decoration: none;
   margin: 12px 0;
 }
-
-/* Başlık */
-.web-store-box .title {
-  font-size: 18px;
-  font-weight: bold;
-  color: #0b87da;
-}
-
-.custom-box .title:hover {
+.criteria .title:hover {
   text-decoration: none;
 }
 
-/* Açıklama */
-.custom-box .description {
-  font-size: 14px;
-  color: inherit;
+.web-store-container {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 16px;
 }
-
-/* Etiketler */
-.custom-box .icon-group {
+.web-store-box {
+  border: 1px solid;
+  border-radius: 8px;
+  padding: 16px;
+  width: calc(50% - 16px);
+  box-sizing: border-box;
   display: flex;
-  gap: 8px;
-  margin-top: 8px;
+  align-items: center;
+  gap: 16px;
+  transition: background-color 0.3s, border-color 0.3s, color 0.3s;
+}
+.web-store-box i {
+  width: 50px;
+  height: 50px;
+  display: inline-block;
+  text-align: center;
+  line-height: 50px;
+  font-size: 50px;
+  color: #0b87da;
+}
+.web-store-box .title {
+  font-size: 18px;
+  font-weight: bold;
+  color: #0b87da;
 }
 
-/* Gece/Gündüz */
+.light-mode .criteria,
+.light-mode .web-store-box,
+.light-mode .service-box,
 .light-mode .custom-box {
   background-color: #f9f9f9;
   border-color: #ccc;
   color: #000;
 }
 
+.dark-mode .web-store-box,
+.dark-mode .service-box,
 .dark-mode .custom-box {
   background-color: #1a1a1a;
   border-color: #444;
   color: #fff;
 }
 
-/* Responsive */
 @media (max-width: 768px) {
   .custom-box {
     flex-direction: column;
@@ -166,51 +226,6 @@ body {
     gap: 8px;
     margin-top: 12px;
   }
-}
-
-/* ------ */
-
-/* Uygulama kutucuğu 2 */
-.service-container {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 16px;
-}
-
-/* Kutu tasarımı */
-.service-box {
-  border: 1px solid;
-  border-radius: 8px;
-  padding: 16px;
-  width: calc(50% - 16px);
-  box-sizing: border-box;
-  display: flex;
-  align-items: center;
-  gap: 16px;
-  transition: background-color 0.3s, border-color 0.3s, color 0.3s;
-}
-
-/* İkon */
-.service-box img {
-  width: 50px;
-  height: auto;
-}
-
-/* Gece/Gündüz modu */
-.light-mode .service-box {
-  background-color: #f9f9f9;
-  border-color: #ccc;
-  color: #000;
-}
-
-.dark-mode .service-box {
-  background-color: #1a1a1a;
-  border-color: #444;
-  color: #fff;
-}
-
-/* Responsive ayarları */
-@media (max-width: 768px) {
   .service-box {
     width: 100%;
     flex-direction: column;
@@ -219,54 +234,6 @@ body {
   .service-box img {
     margin-bottom: 8px;
   }
-}
-
-/* ------ */
-
-/* Kriter kutucuğu */
-.criteria {
-  border: 1px solid;
-  border-radius: 8px;
-  padding: 16px;
-  margin: 16px 0;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-}
-
-/* İkon stili */
-.criteria i {
-  color: #0b87da;
-  font-size: 56px;
-  margin-right: 25px;
-}
-
-.criteria .title:hover {
-  text-decoration: none;
-}
-
-/* Açıklama */
-.criteria .description {
-  font-size: 14px;
-  color: inherit;
-  margin-top: 8px;
-}
-
-/* Gece/Gündüz Modu */
-.light-mode .criteria {
-  background-color: #f9f9f9;
-  border-color: #ccc;
-  color: #000;
-}
-
-.dark-mode .criteria {
-  background-color: #1a1a1a;
-  border-color: #444;
-  color: #fff;
-}
-
-/* Responsive */
-@media (max-width: 768px) {
   .criteria {
     flex-direction: row;
     justify-content: space-between;
@@ -294,54 +261,6 @@ body {
     gap: 8px;
     margin-top: 12px;
   }
-}
-
-/* Web mağazası kutusu */
-.web-store-container {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 16px;
-}
-
-/* Kutu tasarımı */
-.web-store-box {
-  border: 1px solid;
-  border-radius: 8px;
-  padding: 16px;
-  width: calc(50% - 16px);
-  box-sizing: border-box;
-  display: flex;
-  align-items: center;
-  gap: 16px;
-  transition: background-color 0.3s, border-color 0.3s, color 0.3s;
-}
-
-/* İkon */
-.web-store-box i {
-  width: 50px;
-  height: 50px;
-  display: inline-block;
-  text-align: center;
-  line-height: 50px;
-  font-size: 50px;
-  color: #0b87da;
-}
-
-/* Gece/Gündüz modu */
-.light-mode .web-store-box {
-  background-color: #f9f9f9;
-  border-color: #ccc;
-  color: #000;
-}
-
-.dark-mode .web-store-box {
-  background-color: #1a1a1a;
-  border-color: #444;
-  color: #fff;
-}
-
-/* Responsive ayarları */
-@media (max-width: 768px) {
   .web-store-box {
     width: 100%;
     flex-direction: column;
@@ -351,3 +270,5 @@ body {
     margin-bottom: 8px;
   }
 }
+
+/*# sourceMappingURL=style.css.map */
diff --git a/css/style.css.map b/css/style.css.map
new file mode 100644
index 00000000..3a092f9a
--- /dev/null
+++ b/css/style.css.map
@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../scss/style.scss","../scss/vendors/_font-awesome.scss","../scss/base/_typography.scss","../scss/base/_reset.scss","../scss/components/_switch.scss","../scss/utils/_mixins.scss","../scss/components/_custom-box.scss","../scss/components/_service.scss","../scss/components/_criteria.scss","../scss/components/_web-store.scss","../scss/themes/_light-theme.scss","../scss/themes/_dark-theme.scss","../scss/layout/_media-queries.scss"],"names":[],"mappings":"AAAA;ACAQ;ACAA;AAER;EACE;;;AAGF;EACE;;;ACPF;EACE;EACA;EACA;;;ACDF;EACE;EACA;EACA;EACA;EACA;ECUA,ODTyB;ECUzB,QDViD;EACjD;EACA;EACA;EACA;;AACA;EACE;ECGF,ODF2B;ECG3B,QDH8B;;;AAIhC;EACE;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;ECXF,ODY2B;ECX3B,QDWgD;EAC9C;EACA;EACA;EACA;EACA;EACA;;;AAIJ;EACE;;AACA;EACE;EACA;EACA;;;AE1CJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EDOA,OCN2B;EDO3B,QCPiC;EAC/B;;AAEF;EACE;EACA;;AAEF;EACE;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;;AAEF;EACE;;;AC5BF;EACE;EACA;EACA;;AAEF;EFPA;EACA,eEOkC;EFNlC,SEM4B;EAC1B;EACA;EACA;EACA;EACA;EACA;;AACA;EFCF;EACA,QEDmC;;AAEjC;EACE;EACA;EACA;;;ACtBN;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;;AAEF;EACE;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;;AAEF;EACE;;;ACvBF;EACE;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EJDF,OIE6B;EJD7B,QICmC;EAC/B;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;;;AC1BJ;AAAA;AAAA;AAAA;ELQA,kBKJ+B;ELK/B,cKLwC;ELMxC,OKN8C;;;ACJ9C;AAAA;AAAA;ENQA,kBML+B;ENM/B,cMNwC;ENOxC,OMP8C;;;ACNhD;EACE;IACE;IACA;IACA;;EACA;IACE;IACA;IACA;;EAEF;IACE;;EAEF;IACE;;EAEF;IACE;IACA;IACA;IACA;IACA;;EAGJ;IACE;IACA;IACA;;EACA;IACE;;EAGJ;IACE;IACA;IACA;;EACA;IACE;;EAEF;IACE;IACA;;EAEF;IACE;;EAEF;IACE;IACA;IACA;;EAEF;IACE;IACA;IACA;IACA;IACA;;EAGJ;IACE;IACA;IACA;;EACA;IACE","file":"style.css"}
\ No newline at end of file
diff --git a/index.html b/index.html
index c3184b78..9b6b0751 100644
--- a/index.html
+++ b/index.html
@@ -1,15 +1,9 @@
 <!DOCTYPE html>
 <html lang="tr">
   <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Güvendekal.org</title>
-    <!-- İkonlar  -->
-    <link
-      rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"
-    />
-    <!-- Site ikonu  -->
     <link rel="icon" href="docs/images/icon.png" type="image/png" />
     <!-- Tema  -->
     <link
@@ -17,9 +11,6 @@
       href="https://cdn.jsdelivr.net/npm/docsify-themeable@0/dist/css/theme-simple-dark.css"
       id="theme-style"
     />
-    <!-- Github'da düzenle eklentisi  -->
-    <!-- Font  -->
-    <link href="https://fonts.cdnfonts.com/css/inter" rel="stylesheet" />
     <!-- Stil dosyası -->
     <link rel="stylesheet" href="css/style.css" />
     <style>
@@ -50,4 +41,4 @@
     <script src="//unpkg.com/docsify-pagination/dist/docsify-pagination.min.js"></script>
     <script src="//cdn.jsdelivr.net/npm/docsify@4/lib/plugins/search.js"></script>
   </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/.markdown-lint.yml b/linting-rules/.markdown-lint.yml
similarity index 100%
rename from .markdown-lint.yml
rename to linting-rules/.markdown-lint.yml
diff --git a/linting-rules/.stylelintrc.yml b/linting-rules/.stylelintrc.yml
new file mode 100644
index 00000000..cea7d676
--- /dev/null
+++ b/linting-rules/.stylelintrc.yml
@@ -0,0 +1,4 @@
+extends: 'stylelint-config-standard'
+rules:
+  no-descending-specificity: null
+  at-rule-no-unknown: null
diff --git a/scss/base/_reset.scss b/scss/base/_reset.scss
new file mode 100644
index 00000000..b4133732
--- /dev/null
+++ b/scss/base/_reset.scss
@@ -0,0 +1,5 @@
+* {
+  padding: 0;
+  margin: 0;
+  box-sizing: border-box;
+}
diff --git a/scss/base/_typography.scss b/scss/base/_typography.scss
new file mode 100644
index 00000000..b97ab197
--- /dev/null
+++ b/scss/base/_typography.scss
@@ -0,0 +1,9 @@
+@import url('https://fonts.cdnfonts.com/css/inter');
+
+body {
+  font-family: 'Inter', sans-serif;
+}
+
+p {
+  text-align: justify;
+}
diff --git a/scss/components/_criteria.scss b/scss/components/_criteria.scss
new file mode 100644
index 00000000..f5fc10d9
--- /dev/null
+++ b/scss/components/_criteria.scss
@@ -0,0 +1,29 @@
+.criteria {
+  border: 1px solid;
+  border-radius: 8px;
+  padding: 16px;
+  margin: 16px 0;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  i {
+    color: #0b87da;
+    font-size: 56px;
+    margin-right: 25px;
+  }
+  .description {
+    font-size: 14px;
+    color: inherit;
+    margin-top: 8px;
+  }
+  .title {
+    font-size: 18px;
+    font-weight: bold;
+    color: #0b87da;
+    text-decoration: none;
+    margin: 12px 0;
+  }
+  .title:hover {
+    text-decoration: none;
+  }
+}
diff --git a/scss/components/_custom-box.scss b/scss/components/_custom-box.scss
new file mode 100644
index 00000000..fb4cba27
--- /dev/null
+++ b/scss/components/_custom-box.scss
@@ -0,0 +1,34 @@
+@use "../utils/mixins";
+
+.custom-box {
+  border: 1px solid;
+  border-radius: 8px;
+  padding: 16px;
+  margin: 16px 0;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  img {
+    @include mixins.set-size(70px, 70px);
+    margin-right: 16px;
+  }
+  .description {
+    font-size: 14px;
+    color: inherit;
+  }
+  .icon-group {
+    display: flex;
+    gap: 8px;
+    margin-top: 8px;
+  }
+  .title {
+    font-size: 18px;
+    font-weight: bold;
+    color: #0b87da;
+    text-decoration: none;
+    margin-bottom: 8px;
+  }
+  .title:hover {
+    text-decoration: none;
+  }
+}
diff --git a/scss/components/_service.scss b/scss/components/_service.scss
new file mode 100644
index 00000000..4caccd0e
--- /dev/null
+++ b/scss/components/_service.scss
@@ -0,0 +1,26 @@
+@use "../utils/mixins";
+
+.service {
+  &-container {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 16px;
+  }
+  &-box {
+    @include mixins.box-style(16px, 8px);
+    width: calc(50% - 16px);
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    gap: 16px;
+    transition: background-color 0.3s, border-color 0.3s, color 0.3s;
+    img {
+      @include mixins.set-size(50px, auto);
+    }
+    .title {
+      font-size: 18px;
+      font-weight: bold;
+      color: #0b87da;
+    }
+  }
+}
diff --git a/scss/components/_switch.scss b/scss/components/_switch.scss
new file mode 100644
index 00000000..e82b7941
--- /dev/null
+++ b/scss/components/_switch.scss
@@ -0,0 +1,47 @@
+@use "../utils/mixins";
+
+.switch {
+  display: block;
+  --width-of-switch: 3.5em;
+  --height-of-switch: 2em;
+  --size-of-icon: 1.4em;
+  --slider-offset: 0.3em;
+  @include mixins.set-size(var(--width-of-switch), var(--height-of-switch));
+  position: fixed;
+  bottom: 20px;
+  right: 20px;
+  z-index: 999;
+  input {
+    opacity: 0;
+    @include mixins.set-size(0, 0);
+  }
+}
+
+.slider {
+  position: absolute;
+  cursor: pointer;
+  inset: 0;
+  background-color: #f4f4f5;
+  transition: 0.4s;
+  border-radius: 30px;
+  &:before {
+    position: absolute;
+    content: '';
+    @include mixins.set-size(var(--size-of-icon), var(--size-of-icon));
+    border-radius: 20px;
+    left: var(--slider-offset);
+    top: 50%;
+    transform: translateY(-50%);
+    background: linear-gradient(40deg, #ff0080, #ff8c00 70%);
+    transition: 0.4s;
+  }
+}
+
+input:checked + .slider {
+  background-color: #303136;
+  &:before {
+    left: calc(100% - (var(--size-of-icon) + var(--slider-offset)));
+    background: #303136;
+    box-shadow: inset -3px -2px 5px -2px #8983f7, inset -10px -4px 0 0 #a3dafb;
+  }
+}
diff --git a/scss/components/_web-store.scss b/scss/components/_web-store.scss
new file mode 100644
index 00000000..2878b6f9
--- /dev/null
+++ b/scss/components/_web-store.scss
@@ -0,0 +1,33 @@
+@use "../utils/mixins";
+
+.web-store {
+  &-container {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 16px;
+  }
+  &-box {
+    border: 1px solid;
+    border-radius: 8px;
+    padding: 16px;
+    width: calc(50% - 16px);
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    gap: 16px;
+    transition: background-color 0.3s, border-color 0.3s, color 0.3s;
+    i {
+      @include mixins.set-size(50px, 50px);
+      display: inline-block;
+      text-align: center;
+      line-height: 50px;
+      font-size: 50px;
+      color: #0b87da;
+    }
+    .title {
+      font-size: 18px;
+      font-weight: bold;
+      color: #0b87da;
+    }
+  }
+}
diff --git a/scss/layout/_media-queries.scss b/scss/layout/_media-queries.scss
new file mode 100644
index 00000000..297e21c4
--- /dev/null
+++ b/scss/layout/_media-queries.scss
@@ -0,0 +1,68 @@
+@media (max-width: 768px) {
+  .custom-box {
+    flex-direction: column;
+    text-align: center;
+    padding: 12px;
+    img {
+      max-width: 100px;
+      height: auto;
+      margin: 0 auto 12px auto;
+    }
+    .title {
+      font-size: 16px;
+    }
+    .description {
+      font-size: 13px;
+    }
+    .icon-group {
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: center;
+      gap: 8px;
+      margin-top: 12px;
+    }
+  }
+  .service-box {
+    width: 100%;
+    flex-direction: column;
+    text-align: center;
+    img {
+      margin-bottom: 8px;
+    }
+  }
+  .criteria {
+    flex-direction: row;
+    justify-content: space-between;
+    padding: 12px;
+    i {
+      margin-right: 25px;
+    }
+    .title {
+      font-size: 16px;
+      margin: 0;
+    }
+    .description {
+      font-size: 13px;
+    }
+    img {
+      max-width: 100px;
+      height: auto;
+      margin: 0 auto 12px auto;
+    }
+    .icon-group {
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: center;
+      gap: 8px;
+      margin-top: 12px;
+    }
+  }
+  .web-store-box {
+    width: 100%;
+    flex-direction: column;
+    text-align: center;
+    i {
+      margin-bottom: 8px;
+    }
+  }
+}
diff --git a/scss/style.scss b/scss/style.scss
new file mode 100644
index 00000000..00b9cb3b
--- /dev/null
+++ b/scss/style.scss
@@ -0,0 +1,26 @@
+/*  Don't change the CSS manually. SCSS automatically generates style.css and *map files. SCSS is a CSS pre-processor */
+
+// Utils
+// @import 'utils/variables';
+@use 'utils/mixins';
+
+// Vendors
+@use 'vendors/font-awesome';
+
+// Base
+@use 'base/typography';
+@use 'base/reset';
+
+// Components
+@use 'components/switch';
+@use 'components/custom-box';
+@use 'components/service';
+@use 'components/criteria';
+@use 'components/web-store';
+
+// Themes
+@use 'themes/light-theme';
+@use 'themes/dark-theme';
+
+// Responsive
+@use 'layout/media-queries';
diff --git a/scss/themes/_dark-theme.scss b/scss/themes/_dark-theme.scss
new file mode 100644
index 00000000..df316b36
--- /dev/null
+++ b/scss/themes/_dark-theme.scss
@@ -0,0 +1,9 @@
+@use "../utils/mixins";
+
+.dark-mode {
+  .web-store-box,
+  .service-box,
+  .custom-box {
+    @include mixins.change-color(#1a1a1a, #444, #fff);
+  }
+}
diff --git a/scss/themes/_light-theme.scss b/scss/themes/_light-theme.scss
new file mode 100644
index 00000000..8c958274
--- /dev/null
+++ b/scss/themes/_light-theme.scss
@@ -0,0 +1,10 @@
+@use "../utils/mixins";
+
+.light-mode {
+  .criteria,
+  .web-store-box,
+  .service-box,
+  .custom-box {
+    @include mixins.change-color(#f9f9f9, #ccc, #000);
+  }
+}
diff --git a/scss/utils/_mixins.scss b/scss/utils/_mixins.scss
new file mode 100644
index 00000000..748e4a5b
--- /dev/null
+++ b/scss/utils/_mixins.scss
@@ -0,0 +1,20 @@
+@mixin box-style($padding: 16px, $border-radius: 8px) {
+  border: 1px solid;
+  border-radius: $border-radius;
+  padding: $padding;
+}
+
+@mixin change-color(
+  $bg-color: #f4f4f5,
+  $border-color: #ccc,
+  $text-color: #000
+) {
+  background-color: $bg-color;
+  border-color: $border-color;
+  color: $text-color;
+}
+
+@mixin set-size($width, $height) {
+  width: $width;
+  height: $height;
+}
diff --git a/scss/vendors/_font-awesome.scss b/scss/vendors/_font-awesome.scss
new file mode 100644
index 00000000..e925631e
--- /dev/null
+++ b/scss/vendors/_font-awesome.scss
@@ -0,0 +1 @@
+@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.1/css/all.min.css');