diff --git a/README.md b/README.md
index 9157978..124d732 100644
--- a/README.md
+++ b/README.md
@@ -1,5 +1,8 @@
-# FEC
-Front End Capstone for Hack Reactor
+# FEC - Threads
+An online clothing store application with a modern design and responsive UX
+
+# Video Demo
+https://bit.ly/3j5nzra
 
 ## Getting a Copy of the Repo
 If you haven't already, fork the repository on GitHub and clone your newly created repo down to your computer.
diff --git a/client/src/relatedItems/Carousel/__test__/Carousel.test.js b/client/src/relatedItems/Carousel/__test__/Carousel.test.js
index f100098..e4eaec0 100644
--- a/client/src/relatedItems/Carousel/__test__/Carousel.test.js
+++ b/client/src/relatedItems/Carousel/__test__/Carousel.test.js
@@ -11,7 +11,7 @@ afterEach(() => {
   cleanup();
 });
 
-it ('renders the Related Carousel without crashing', () => {
+test('renders the Related Carousel without crashing', () => {
   render(<Carousel
     products={productsWithStyle}
     productId={13023}
@@ -23,7 +23,7 @@ it ('renders the Related Carousel without crashing', () => {
   expect(carouselElement).toBeInTheDocument();
 });
 
-it ('renders Outfit Carousel without crashing', () => {
+test('renders Outfit Carousel without crashing', () => {
   render(<Carousel
     products={sampleOutfits}
     productId={13023}
@@ -33,4 +33,26 @@ it ('renders Outfit Carousel without crashing', () => {
   />);
   const carouselElement = screen.getByTestId('carousel-1');
   expect(carouselElement).toBeInTheDocument();
+});
+
+test('related carousel matches snapshot', () => {
+  const relatedTree = renderer.create(<Carousel
+    products={productsWithStyle}
+    productId={13023}
+    related={true}
+    overviewProduct={products[0]}
+    overviewRating={4}
+  />).toJSON();
+  expect(relatedTree).toMatchSnapshot();
+});
+
+test('outfit carousel matches snapshot', () => {
+  const outfitTree = renderer.create(<Carousel
+    products={sampleOutfits}
+    productId={13023}
+    related={false}
+    overviewProduct={products[0]}
+    overviewRating={4}
+  />).toJSON();
+  expect(outfitTree).toMatchSnapshot();
 });
\ No newline at end of file
diff --git a/client/src/relatedItems/Carousel/__test__/__snapshots__/Carousel.test.js.snap b/client/src/relatedItems/Carousel/__test__/__snapshots__/Carousel.test.js.snap
new file mode 100644
index 0000000..f759d1f
--- /dev/null
+++ b/client/src/relatedItems/Carousel/__test__/__snapshots__/Carousel.test.js.snap
@@ -0,0 +1,14 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`related carousel matches snapshot 1`] = `
+<section
+  className="carousel"
+  data-testid="carousel-1"
+>
+  <div />
+  <div
+    className="cards-container"
+  />
+  <div />
+</section>
+`;
diff --git a/client/src/relatedItems/CompareModal/__test__/CompareModal.test.js b/client/src/relatedItems/CompareModal/__test__/CompareModal.test.js
index 7a00a80..7d9c72b 100644
--- a/client/src/relatedItems/CompareModal/__test__/CompareModal.test.js
+++ b/client/src/relatedItems/CompareModal/__test__/CompareModal.test.js
@@ -2,7 +2,7 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import CompareModal from '../CompareModal.jsx';
 
-it ('renders without crashing', () => {
+test('renders without crashing', () => {
   const div = document.createElement('div');
   ReactDOM.render(<CompareModal/>, div);
 });
\ No newline at end of file
diff --git a/client/src/relatedItems/OutfitCard/__test__/OutfitCard.test.js b/client/src/relatedItems/OutfitCard/__test__/OutfitCard.test.js
index 8e455eb..dceb517 100644
--- a/client/src/relatedItems/OutfitCard/__test__/OutfitCard.test.js
+++ b/client/src/relatedItems/OutfitCard/__test__/OutfitCard.test.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import { render, screen, cleanup } from '@testing-library/react';
 import OutfitCard from '../OutfitCard.jsx';
-import {renderer, act } from 'react-test-renderer';
+import renderer from 'react-test-renderer';
 import sampleOutfits from '../../../../../data/sampleOutfits.js';
 import '@testing-library/jest-dom/extend-expect';
 
@@ -9,10 +9,13 @@ afterEach(() => {
   cleanup();
 });
 
-it ('renders without crashing', () => {
-  act(() => {
-    render(<OutfitCard outfit={sampleOutfits[13023]}/>);
-  });
+test('renders an outfit card without crashing', () => {
+  render(<OutfitCard outfit={sampleOutfits[13023]}/>);
   const outfitElement = screen.getByTestId('outfit-13023');
   expect(outfitElement).toBeInTheDocument();
 });
+
+test('outfit card matches snapshot', () => {
+  const outfitTree = renderer.create(<OutfitCard outfit={sampleOutfits[13023]}/>).toJSON();
+  expect(outfitTree).toMatchSnapshot();
+});
\ No newline at end of file
diff --git a/client/src/relatedItems/OutfitCard/__test__/__snapshots__/OutfitCard.test.js.snap b/client/src/relatedItems/OutfitCard/__test__/__snapshots__/OutfitCard.test.js.snap
new file mode 100644
index 0000000..c4936b3
--- /dev/null
+++ b/client/src/relatedItems/OutfitCard/__test__/__snapshots__/OutfitCard.test.js.snap
@@ -0,0 +1,203 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`outfit card matches snapshot 1`] = `
+<div
+  className="card-container"
+  data-testid="outfit-13023"
+>
+  <svg
+    className="action-btn"
+    fill="currentColor"
+    height="1em"
+    onClick={[Function]}
+    stroke="currentColor"
+    strokeWidth="0"
+    style={
+      Object {
+        "backgroundColor": "#fff",
+        "color": "#000",
+      }
+    }
+    viewBox="0 0 512 512"
+    width="1em"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M256 90c44.3 0 86 17.3 117.4 48.6C404.7 170 422 211.7 422 256s-17.3 86-48.6 117.4C342 404.7 300.3 422 256 422s-86-17.3-117.4-48.6C107.3 342 90 300.3 90 256s17.3-86 48.6-117.4C170 107.3 211.7 90 256 90m0-42C141.1 48 48 141.1 48 256s93.1 208 208 208 208-93.1 208-208S370.9 48 256 48z"
+    />
+    <path
+      d="M360 330.9L330.9 360 256 285.1 181.1 360 152 330.9l74.9-74.9-74.9-74.9 29.1-29.1 74.9 74.9 74.9-74.9 29.1 29.1-74.9 74.9z"
+    />
+  </svg>
+  <div
+    className="card-inner-container"
+    onClick={[Function]}
+  >
+    <div
+      className="card-item"
+    >
+      <img
+        alt="outfit-card"
+        className="card-image"
+        loading="lazy"
+        src="https://images.unsplash.com/photo-1501088430049-71c79fa3283e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=300&q=80"
+      />
+    </div>
+    <div
+      className="card-item text category"
+    >
+      JACKETS
+    </div>
+    <div
+      className="card-item text name"
+    >
+      Camo Onesie
+    </div>
+    <div
+      className="card-item text"
+    >
+      $
+    </div>
+    <div
+      className="card-item text rating"
+    >
+      <div
+        style={
+          Object {
+            "overflow": "hidden",
+            "position": "relative",
+          }
+        }
+      >
+        <style
+          dangerouslySetInnerHTML={
+            Object {
+              "__html": "
+    .stars-rating-07095687728856404:before {
+      position: absolute;
+      overflow: hidden;
+      display: block;
+      z-index: 1;
+      top: 0; left: 0;
+      width: 50%;
+      content: attr(data-forhalf);
+      color: #ffd700;
+  }",
+            }
+          }
+        />
+        <span
+          className=""
+          data-forhalf="★"
+          data-index={0}
+          onClick={[Function]}
+          onMouseLeave={[Function]}
+          onMouseMove={[Function]}
+          onMouseOver={[Function]}
+          style={
+            Object {
+              "color": "#ffd700",
+              "cursor": "default",
+              "display": "block",
+              "float": "left",
+              "fontSize": "15px",
+              "overflow": "hidden",
+              "position": "relative",
+            }
+          }
+        >
+          ★
+        </span>
+        <span
+          className=""
+          data-forhalf="★"
+          data-index={1}
+          onClick={[Function]}
+          onMouseLeave={[Function]}
+          onMouseMove={[Function]}
+          onMouseOver={[Function]}
+          style={
+            Object {
+              "color": "#ffd700",
+              "cursor": "default",
+              "display": "block",
+              "float": "left",
+              "fontSize": "15px",
+              "overflow": "hidden",
+              "position": "relative",
+            }
+          }
+        >
+          ★
+        </span>
+        <span
+          className=""
+          data-forhalf="★"
+          data-index={2}
+          onClick={[Function]}
+          onMouseLeave={[Function]}
+          onMouseMove={[Function]}
+          onMouseOver={[Function]}
+          style={
+            Object {
+              "color": "#ffd700",
+              "cursor": "default",
+              "display": "block",
+              "float": "left",
+              "fontSize": "15px",
+              "overflow": "hidden",
+              "position": "relative",
+            }
+          }
+        >
+          ★
+        </span>
+        <span
+          className="stars-rating-07095687728856404"
+          data-forhalf="★"
+          data-index={3}
+          onClick={[Function]}
+          onMouseLeave={[Function]}
+          onMouseMove={[Function]}
+          onMouseOver={[Function]}
+          style={
+            Object {
+              "color": "gray",
+              "cursor": "default",
+              "display": "block",
+              "float": "left",
+              "fontSize": "15px",
+              "overflow": "hidden",
+              "position": "relative",
+            }
+          }
+        >
+          ★
+        </span>
+        <span
+          className=""
+          data-forhalf="★"
+          data-index={4}
+          onClick={[Function]}
+          onMouseLeave={[Function]}
+          onMouseMove={[Function]}
+          onMouseOver={[Function]}
+          style={
+            Object {
+              "color": "gray",
+              "cursor": "default",
+              "display": "block",
+              "float": "left",
+              "fontSize": "15px",
+              "overflow": "hidden",
+              "position": "relative",
+            }
+          }
+        >
+          ★
+        </span>
+      </div>
+    </div>
+  </div>
+</div>
+`;
diff --git a/client/src/relatedItems/RelatedCard/__test__/RelatedCard.test.js b/client/src/relatedItems/RelatedCard/__test__/RelatedCard.test.js
index ec54e96..5022d86 100644
--- a/client/src/relatedItems/RelatedCard/__test__/RelatedCard.test.js
+++ b/client/src/relatedItems/RelatedCard/__test__/RelatedCard.test.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import { render, screen, cleanup } from '@testing-library/react';
-import {renderer, act } from 'react-test-renderer';
+import renderer from 'react-test-renderer';
 import '@testing-library/jest-dom/extend-expect';
 import RelatedCard from '../RelatedCard.jsx';
 import productWithStyle from '../../../../../data/sampleRelatedProducts.js';
@@ -9,8 +9,13 @@ afterEach(() => {
   cleanup();
 });
 
-it ('renders without crashing', () => {
+test('renders a related card without crashing', () => {
   render(<RelatedCard product={productWithStyle[0]} />);
   const relatedElement = screen.getByTestId('related-13023');
   expect(relatedElement).toBeInTheDocument();
 });
+
+test('related card matches snapshot', () => {
+  const relatedTree = renderer.create(<RelatedCard product={productWithStyle[0]} />).toJSON();
+  expect(relatedTree).toMatchSnapshot();
+});
\ No newline at end of file
diff --git a/client/src/relatedItems/RelatedCard/__test__/__snapshots__/RelatedCard.test.js.snap b/client/src/relatedItems/RelatedCard/__test__/__snapshots__/RelatedCard.test.js.snap
new file mode 100644
index 0000000..8514ee2
--- /dev/null
+++ b/client/src/relatedItems/RelatedCard/__test__/__snapshots__/RelatedCard.test.js.snap
@@ -0,0 +1,200 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`related card matches snapshot 1`] = `
+<div
+  className="card-container"
+  data-testid="related-13023"
+>
+  <svg
+    className="action-btn"
+    fill="currentColor"
+    height="1em"
+    onClick={[Function]}
+    stroke="currentColor"
+    strokeWidth="0"
+    style={
+      Object {
+        "backgroundColor": "#fff",
+        "color": "#000",
+      }
+    }
+    viewBox="0 0 24 24"
+    width="1em"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M22 9.24l-7.19-.62L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21 12 17.27 18.18 21l-1.63-7.03L22 9.24zM12 15.4l-3.76 2.27 1-4.28-3.32-2.88 4.38-.38L12 6.1l1.71 4.04 4.38.38-3.32 2.88 1 4.28L12 15.4z"
+    />
+  </svg>
+  <div
+    className="card-inner-container"
+    onClick={[Function]}
+  >
+    <div
+      className="card-item"
+    >
+      <img
+        alt="related-card"
+        className="card-image"
+        loading="lazy"
+        src="https://images.unsplash.com/photo-1501088430049-71c79fa3283e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=300&q=80"
+      />
+    </div>
+    <div
+      className="card-item text category"
+    >
+      JACKETS
+    </div>
+    <div
+      className="card-item text name"
+    >
+      Camo Onesie
+    </div>
+    <div
+      className="card-item text"
+    >
+      $
+    </div>
+    <div
+      className="card-item text rating"
+    >
+      <div
+        style={
+          Object {
+            "overflow": "hidden",
+            "position": "relative",
+          }
+        }
+      >
+        <style
+          dangerouslySetInnerHTML={
+            Object {
+              "__html": "
+    .stars-rating-06652301704036518:before {
+      position: absolute;
+      overflow: hidden;
+      display: block;
+      z-index: 1;
+      top: 0; left: 0;
+      width: 50%;
+      content: attr(data-forhalf);
+      color: #ffd700;
+  }",
+            }
+          }
+        />
+        <span
+          className=""
+          data-forhalf="★"
+          data-index={0}
+          onClick={[Function]}
+          onMouseLeave={[Function]}
+          onMouseMove={[Function]}
+          onMouseOver={[Function]}
+          style={
+            Object {
+              "color": "gray",
+              "cursor": "default",
+              "display": "block",
+              "float": "left",
+              "fontSize": "15px",
+              "overflow": "hidden",
+              "position": "relative",
+            }
+          }
+        >
+          ★
+        </span>
+        <span
+          className=""
+          data-forhalf="★"
+          data-index={1}
+          onClick={[Function]}
+          onMouseLeave={[Function]}
+          onMouseMove={[Function]}
+          onMouseOver={[Function]}
+          style={
+            Object {
+              "color": "gray",
+              "cursor": "default",
+              "display": "block",
+              "float": "left",
+              "fontSize": "15px",
+              "overflow": "hidden",
+              "position": "relative",
+            }
+          }
+        >
+          ★
+        </span>
+        <span
+          className=""
+          data-forhalf="★"
+          data-index={2}
+          onClick={[Function]}
+          onMouseLeave={[Function]}
+          onMouseMove={[Function]}
+          onMouseOver={[Function]}
+          style={
+            Object {
+              "color": "gray",
+              "cursor": "default",
+              "display": "block",
+              "float": "left",
+              "fontSize": "15px",
+              "overflow": "hidden",
+              "position": "relative",
+            }
+          }
+        >
+          ★
+        </span>
+        <span
+          className=""
+          data-forhalf="★"
+          data-index={3}
+          onClick={[Function]}
+          onMouseLeave={[Function]}
+          onMouseMove={[Function]}
+          onMouseOver={[Function]}
+          style={
+            Object {
+              "color": "gray",
+              "cursor": "default",
+              "display": "block",
+              "float": "left",
+              "fontSize": "15px",
+              "overflow": "hidden",
+              "position": "relative",
+            }
+          }
+        >
+          ★
+        </span>
+        <span
+          className=""
+          data-forhalf="★"
+          data-index={4}
+          onClick={[Function]}
+          onMouseLeave={[Function]}
+          onMouseMove={[Function]}
+          onMouseOver={[Function]}
+          style={
+            Object {
+              "color": "gray",
+              "cursor": "default",
+              "display": "block",
+              "float": "left",
+              "fontSize": "15px",
+              "overflow": "hidden",
+              "position": "relative",
+            }
+          }
+        >
+          ★
+        </span>
+      </div>
+    </div>
+  </div>
+</div>
+`;