diff --git a/resources.html b/resources.html
new file mode 100644
index 00000000..e39233a7
--- /dev/null
+++ b/resources.html
@@ -0,0 +1,305 @@
+
+<!DOCTYPE html>
+<html>
+<head>
+  <!-- Standard Meta -->
+  <meta charset="utf-8">
+
+  <!-- Site Properties -->
+  <title>STRchive</title>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.7/semantic.min.css">
+
+
+  <style type="text/css">
+
+    .hidden.menu {
+      display: none;
+    }
+
+    .masthead.segment {
+      min-height: 700px;
+      padding: 1em 0em;
+    }
+    .masthead .logo.item img {
+      margin-right: 1em;
+    }
+    .masthead .ui.menu .ui.button {
+      margin-left: 0.5em;
+    }
+    .masthead h1.ui.header {
+      margin-top: 3em;
+      margin-bottom: 0em;
+      font-size: 4em;
+      font-weight: normal;
+    }
+    .masthead h2 {
+      font-size: 1.7em;
+      font-weight: normal;
+    }
+
+    .ui.vertical.stripe {
+      padding: 8em 0em;
+    }
+    .ui.vertical.stripe h3 {
+      font-size: 2em;
+    }
+    .ui.vertical.stripe .button + h3,
+    .ui.vertical.stripe p + h3 {
+      margin-top: 3em;
+    }
+    .ui.vertical.stripe .floated.image {
+      clear: both;
+    }
+    .ui.vertical.stripe p {
+      font-size: 1.33em;
+    }
+    .ui.vertical.stripe .horizontal.divider {
+      margin: 3em 0em;
+    }
+
+    .quote.stripe.segment {
+      padding: 0em;
+    }
+    .quote.stripe.segment .grid .column {
+      padding-top: 5em;
+      padding-bottom: 5em;
+    }
+
+    .footer.segment {
+      padding: 5em 0em;
+    }
+
+    .secondary.pointing.menu .toc.item {
+      display: none;
+    }
+
+    @media only screen and (max-width: 700px) {
+      .ui.fixed.menu {
+        display: none !important;
+      }
+      .secondary.pointing.menu .item,
+      .secondary.pointing.menu .menu {
+        display: none;
+      }
+      .secondary.pointing.menu .toc.item {
+        display: block;
+      }
+      .masthead.segment {
+        min-height: 350px;
+      }
+      .masthead h1.ui.header {
+        font-size: 2em;
+        margin-top: 1.5em;
+      }
+      .masthead h2 {
+        margin-top: 0.5em;
+        font-size: 1.5em;
+      }
+    }
+
+
+  </style>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
+  <script>
+  $(document)
+    .ready(function() {
+
+      // fix menu when passed
+      $('.masthead')
+        .visibility({
+          once: false,
+          onBottomPassed: function() {
+            $('.fixed.menu').transition('fade in');
+          },
+          onBottomPassedReverse: function() {
+            $('.fixed.menu').transition('fade out');
+          }
+        })
+      ;
+
+      // create sidebar and attach to menu open
+      $('.ui.sidebar')
+        .sidebar('attach events', '.toc.item')
+      ;
+
+    })
+  ;
+  </script>
+</head>
+<body>
+
+<!-- Header -->
+<div class="pusher">
+  <div class="ui inverted vertical  center aligned segment">
+
+    <div class="ui container">
+      <div class="ui large secondary inverted pointing menu">
+        <a class="toc item">
+          <i class="sidebar icon"></i>
+        </a>
+        <a class="item" href="index.html">Home</a>
+        <a class="item" href="about.html">About</a>
+        <a class="item" href="/database/index.html">STR Database</a>
+        <a class="item" href="plots.html">Plots</a>
+        <a class="active item" href="resources.html">Resources</a>
+        <a class="item" href="contribute.html">Contribute</a>
+        <div class="right item">
+          <a class="ui inverted button" href="index.html">STRchive</a>
+          <a class="ui icon inverted button" href="https://github.com/hdashnow/STRchive">
+            <i class="github icon"></i>
+          </a>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<!-- Page Contents -->
+<!---- [ ]  Genotyping methods
+- [ ]  Differences between TR locus definitions and why
+- [ ]  Genome-wide TR loci resources
+Both versions of the Palladium? TRF default and 7M?
+Adotto - may overestimate size.
+-->
+
+
+  <div class="ui vertical stripe segment">
+    <div class="ui middle aligned stackable grid container">
+      <div class="row">
+        <div class="eight wide column">
+
+          <h3 class="ui header">Computational methods</h3>
+          <p>
+            A selection of computational methods that we have either developed or 
+            used in our research. For a more comprehensive review of methods, see
+            <a href="https://doi.org/10.1038/s41576-024-00692-3">
+              Tanudisastro et al. (2024)</a>.
+          </p>
+          <p>
+            Short-read genotyping methods
+            <li><a href="https://github.com/Illumina/ExpansionHunter">ExpansionHunter</a></li>
+            <li><a href="https://github.com/gymrek-lab/HipSTR">HipSTR</a></li>
+            <li><a href="https://github.com/gymreklab/gangstr">gangSTR</a></li>
+          </p>
+          <p>
+            Short-read novel locus detection methods
+            <li><a href="https://github.com/quinlan-lab/STRling">STRling</a></li>
+            <li><a href="https://github.com/Illumina/ExpansionHunterDenovo">ExpansionHunter Denovo</a></li>
+          </p>
+          <p>
+            Long-read genotyping methods
+            <li><a href="https://github.com/PacificBiosciences/trgt">TRGT</a></li>
+            <li><a href="https://github.com/PacificBiosciences/trgt-denovo">TRGT-denovo</a></li>
+          </p>
+
+          
+        </div>
+        <div class="six wide right floated column">
+          <h3 class="ui header">Tandem repeat catalogs</h3>
+          <p>
+            <li><a href="https://github.com/broadinstitute/str-analysis/tree/main/str_analysis/variant_catalogs">gnomAD disease loci: ExpansionHunter format</a></li>
+            <li><a href="https://github.com/Illumina/RepeatCatalogs">174,293 polymorphic STRs: ExpansionHunter format</a>
+            <li><a href="https://github.com/PacificBiosciences/trgt/blob/main/repeats/repeat_catalog.hg38.bed">174,293 polymorphic STRs: TRGT format</a>
+          </p>
+
+          <h3 class="ui header">Databases</h3>
+          <p>
+            <li><a href="https://gnomad.broadinstitute.org/short-tandem-repeats">gnomAD: Tandem Repeats</a></li>
+            <li><a href="https://stripy.org/">STRipy</a></li>
+            <li><a href="https://www.ncbi.nlm.nih.gov/books/NBK535148/">GeneReviews: Tandem Repeat Disorders</a></li>
+            <li><a href="https://omim.org/">OMIM</a>
+          </p>
+
+        </div>
+      </div>
+      <div class="row">
+        <!-- <div class="center aligned column">
+          <a class="ui huge button">Check Them Out</a>
+        </div> -->
+      </div>
+    </div>
+  </div>
+
+
+
+
+  <div class="ui vertical stripe segment">
+    <div class="ui text container">
+      
+      <h3 class="ui header">Why do repeat locus definitions differ between resources?</h3>
+      <p>
+        There are often multiple ways to define a given repeat locus. For example, 
+        defining a locus as a stretch of perfectly repeting motifs tends to result in
+        a narrower locus than strategies allowing for interruptions. In coding regions the 
+        locus boundary might be chosen to align with the reading frame.
+      </p>
+      <p>
+        There are often multiple "correct" ways to define a given repeat locus, however
+        careful consideration must be made to the downstream uses of the data. 
+        In particular, genotyping accuracy can be affected by the choice of locus definition.
+      </p>
+      <p>
+        The loci in STRchive were defined to be broader, allowing for interruptions, and
+        with consideration to the biological context and clinical utility of the locus.
+        This strategy increases the chance that the locus will overlap with a relevant 
+        variant call when STRchive is used to annotate a VCF file. It is also the preferred
+        approach to defining loci for improved genotyping accuracy with 
+        <a href="https://github.com/PacificBiosciences/trgt">TRGT</a>.
+        In contrast, 
+        <a href="https://github.com/Illumina/ExpansionHunter">ExpansionHunter</a>
+        tends to perform better with narrower loci that
+        exclude repeat interruptions. For this reason, repeat definitions used in
+        <a href="https://gnomad.broadinstitute.org/short-tandem-repeats">gnomAD</a>
+        tend to be narrower than those used in STRchive.
+      </p>
+        
+    </div>
+  </div>
+
+  
+</div>
+
+<!-- Footer -->
+<div class="ui inverted vertical footer segment">
+  <div class="ui container">
+    <div class="ui stackable inverted divided equal height stackable grid">
+      <div class="three wide column">
+        <a class="item" href="about.html"> 
+          <h4 class="ui inverted header">About</h4>
+        </a>
+        <div class="ui inverted link list">
+          <a class="item" href="https://github.com/hdashnow/STRchive/issues">Contact Us</a>
+        </div>
+      </div>
+      <div class="three wide column">
+        <a class="item" href="contribute.html"> 
+          <h4 class="ui inverted header">Contribute</h4>
+        </a>
+        <div class="ui inverted link list">
+          <a class="item" href="contribute.html">How To Contribute</a>
+        </div>
+      </div>
+      <div class="ten wide column">
+        <h4 class="ui inverted header">Research use only</h4>
+        <p>The content on and linked from this website 
+          does not constitute and shall not be construed as constituting medical or legal advice of any kind whatsoever, 
+          nor is it a substitute for professional medical advice, diagnosis and treatment.
+        </p>
+        <a rel="license" href="http://creativecommons.org/licenses/by/4.0/">
+          <img class="ui tiny image right floated" alt="Creative Commons License"
+          style="border:0.5px solid silver;"
+          src="https://i.creativecommons.org/l/by/4.0/88x31.png" /></a>
+          <span xmlns:dct="http://purl.org/dc/terms/"
+          href="http://purl.org/dc/dcmitype/Dataset" property="dct:title"
+          rel="dct:type">STRchive</span> is licensed under a
+          <a rel="license" href="http://creativecommons.org/licenses/by/4.0/">
+            Creative Commons Attribution 4.0 International License</a>.
+      </div>
+    </div>
+  </div>
+</div>
+
+
+</body>
+
+</html>
