diff --git a/.DS_Store b/.DS_Store
new file mode 100644
index 0000000000000000000000000000000000000000..eefca2e4ce2ffa4e694ec062e341a5c004bbc141
Binary files /dev/null and b/.DS_Store differ
diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000000000000000000000000000000000000..c20156c6d1f9d0dee893f07ba1eabd8244f75cf3
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,2 @@
+# Docker Output
+/mongo
diff --git a/Docs/ContributionProcess.md b/Docs/ContributionProcess.md
new file mode 100644
index 0000000000000000000000000000000000000000..6ef04c84699b5ded8bae0ffc655c57f1a37e902a
--- /dev/null
+++ b/Docs/ContributionProcess.md
@@ -0,0 +1,47 @@
+# How To: Contribute to this Repo
+This documentation article provides a simple explaination about how to contribute to this repo covering all the GitLab and VSCode ends of things.
+
+## Step 1: Create an Issue
+What are you trying to do? 
+Create an issue
+<img src="Images/Screenshot 2023-03-10 at 12.14.58.png"/>
+
+Fill out the details
+<img src="Images/Screenshot 2023-03-10 at 12.30.33.png" />
+
+## Step 2: Create a merge request (MR)
+This will create the bracnh that you'll use to develop on.
+
+Click this:
+<img  src="Images/Screenshot 2023-03-10 at 12.32.53.png"/>
+
+Fill out the details:
+<img src="Images/Screenshot 2023-03-10 at 12.36.35.png" />
+
+<img src="Images/Screenshot 2023-03-17 at 19.24.06.png" />
+
+## Step 3: Checkout the branch & Make the change
+Click the button to copy the branch name
+<img src="Images/Screenshot 2023-03-17 at 17.11.44.png">
+
+- Open Your code editior, in the case Visual Studio Code (VSCode) and use git to checkout that branch:
+
+- In VSCode hit CRTL (Or CMD)  + Shift + P to open the Command Palette. 
+
+- Type "Git: Checkout" and select "Git: Checkout to..." 
+
+<img src="Images/Screenshot 2023-03-17 at 17.18.33.png"/>
+
+Next, enter origin/yourbranchnamehere and hit enter to checkout your branch. With your branch checked out, you can now make changes to your local copy of the branch. 
+
+<img src="Images/Screenshot 2023-03-17 at 17.20.13.png"/>
+
+Commit the changes, and push the changes to sync your local branch with the Gitlab copy (the origin).
+
+## Step 4: Request a merge review
+
+Finilay, Once you are happy with your changes, complete your MR and assign it as "ready" for reviewing. 
+
+<img src="Images/Screenshot 2023-03-17 at 17.25.44.png"/>
+
+## Step 5: Done! Send a message on the chat asing for a review
\ No newline at end of file
diff --git a/Docs/Images/Screenshot 2023-03-10 at 12.14.58.png b/Docs/Images/Screenshot 2023-03-10 at 12.14.58.png
new file mode 100644
index 0000000000000000000000000000000000000000..18dc79388e3587a5164465bac9936deb0c063616
Binary files /dev/null and b/Docs/Images/Screenshot 2023-03-10 at 12.14.58.png differ
diff --git a/Docs/Images/Screenshot 2023-03-10 at 12.30.33.png b/Docs/Images/Screenshot 2023-03-10 at 12.30.33.png
new file mode 100644
index 0000000000000000000000000000000000000000..6a50d8bb75bb65cc5e8ffecdfe3fef0d5ec28ff6
Binary files /dev/null and b/Docs/Images/Screenshot 2023-03-10 at 12.30.33.png differ
diff --git a/Docs/Images/Screenshot 2023-03-10 at 12.32.53.png b/Docs/Images/Screenshot 2023-03-10 at 12.32.53.png
new file mode 100644
index 0000000000000000000000000000000000000000..12c47c0df1ad73df2f05183fac1281b6ff0cb1a1
Binary files /dev/null and b/Docs/Images/Screenshot 2023-03-10 at 12.32.53.png differ
diff --git a/Docs/Images/Screenshot 2023-03-10 at 12.36.35.png b/Docs/Images/Screenshot 2023-03-10 at 12.36.35.png
new file mode 100644
index 0000000000000000000000000000000000000000..03c0f9ba76ea81700e0e41f99d49d4ec18c84a23
Binary files /dev/null and b/Docs/Images/Screenshot 2023-03-10 at 12.36.35.png differ
diff --git a/Docs/Images/Screenshot 2023-03-10 at 14.23.13.png b/Docs/Images/Screenshot 2023-03-10 at 14.23.13.png
new file mode 100644
index 0000000000000000000000000000000000000000..8f61630562caf3b6627025581a61727d712f2508
Binary files /dev/null and b/Docs/Images/Screenshot 2023-03-10 at 14.23.13.png differ
diff --git a/Docs/Images/Screenshot 2023-03-17 at 17.11.44.png b/Docs/Images/Screenshot 2023-03-17 at 17.11.44.png
new file mode 100644
index 0000000000000000000000000000000000000000..50e5d8c6e6f117ab6d7552d841401919818d48d5
Binary files /dev/null and b/Docs/Images/Screenshot 2023-03-17 at 17.11.44.png differ
diff --git a/Docs/Images/Screenshot 2023-03-17 at 17.18.33.png b/Docs/Images/Screenshot 2023-03-17 at 17.18.33.png
new file mode 100644
index 0000000000000000000000000000000000000000..82672b1cc08c562412bfdaab93a96fbf6677ddeb
Binary files /dev/null and b/Docs/Images/Screenshot 2023-03-17 at 17.18.33.png differ
diff --git a/Docs/Images/Screenshot 2023-03-17 at 17.20.13.png b/Docs/Images/Screenshot 2023-03-17 at 17.20.13.png
new file mode 100644
index 0000000000000000000000000000000000000000..f1ff5d9f7d2bc49b9374e88274348238a43b798b
Binary files /dev/null and b/Docs/Images/Screenshot 2023-03-17 at 17.20.13.png differ
diff --git a/Docs/Images/Screenshot 2023-03-17 at 17.25.44.png b/Docs/Images/Screenshot 2023-03-17 at 17.25.44.png
new file mode 100644
index 0000000000000000000000000000000000000000..f5b3587fbfc20bacbaa172cfe2fd3066c41c42bd
Binary files /dev/null and b/Docs/Images/Screenshot 2023-03-17 at 17.25.44.png differ
diff --git a/Docs/Images/Screenshot 2023-03-17 at 19.24.06.png b/Docs/Images/Screenshot 2023-03-17 at 19.24.06.png
new file mode 100644
index 0000000000000000000000000000000000000000..71d21dc0bbff24459085d645c76e6c45f2175ed2
Binary files /dev/null and b/Docs/Images/Screenshot 2023-03-17 at 19.24.06.png differ
diff --git a/backend-services/feed-service/.g8/form/app/controllers/$model__Camel$Controller.scala b/backend-services/feed-service/.g8/form/app/controllers/$model__Camel$Controller.scala
new file mode 100644
index 0000000000000000000000000000000000000000..6977727b37e444381e28f6db09bff98d066ac4a4
--- /dev/null
+++ b/backend-services/feed-service/.g8/form/app/controllers/$model__Camel$Controller.scala
@@ -0,0 +1,46 @@
+package controllers
+
+import javax.inject._
+import play.api.mvc._
+
+import play.api.data._
+import play.api.data.Forms._
+
+case class $model;format="Camel"$Data(name: String, age: Int)
+
+// NOTE: Add the following to conf/routes to enable compilation of this class:
+/*
+GET     /$model;format="camel"$        controllers.$model;format="Camel"$Controller.$model;format="camel"$Get()
+POST    /$model;format="camel"$        controllers.$model;format="Camel"$Controller.$model;format="camel"$Post()
+*/
+
+/**
+ * $model;format="Camel"$ form controller for Play Scala
+ */
+class $model;format="Camel"$Controller @Inject()(mcc: MessagesControllerComponents) extends MessagesAbstractController(mcc) {
+
+  val $model;format="camel"$Form = Form(
+    mapping(
+      "name" -> text,
+      "age" -> number
+    )($model;format="Camel"$Data.apply)($model;format="Camel"$Data.unapply)
+  )
+
+  def $model;format="camel"$Get() = Action { implicit request: MessagesRequest[AnyContent] =>
+    Ok(views.html.$model;format="camel"$.form($model;format="camel"$Form))
+  }
+
+  def $model;format="camel"$Post() = Action { implicit request: MessagesRequest[AnyContent] =>
+    $model;format="camel"$Form.bindFromRequest().fold(
+      formWithErrors => {
+        // binding failure, you retrieve the form containing errors:
+        BadRequest(views.html.$model;format="camel"$.form(formWithErrors))
+      },
+      $model;format="camel"$Data => {
+        /* binding success, you get the actual value. */       
+        /* flashing uses a short lived cookie */ 
+        Redirect(routes.$model;format="Camel"$Controller.$model;format="camel"$Get()).flashing("success" -> ("Successful " + $model;format="camel"$Data.toString))
+      }
+    )
+  }
+}
diff --git a/backend-services/feed-service/.g8/form/app/views/$model__camel$/form.scala.html b/backend-services/feed-service/.g8/form/app/views/$model__camel$/form.scala.html
new file mode 100644
index 0000000000000000000000000000000000000000..14674ba6e4da6a88308d6cf305f9b56e59ea0a56
--- /dev/null
+++ b/backend-services/feed-service/.g8/form/app/views/$model__camel$/form.scala.html
@@ -0,0 +1,12 @@
+@($model;format="camel"$Form: Form[$model;format="Camel"$Data])(implicit request: MessagesRequestHeader)
+
+<h1>$model;format="camel"$ form</h1>
+
+@request.flash.get("success").getOrElse("")
+
+@helper.form(action = routes.$model;format="Camel"$Controller.$model;format="camel"$Post()) {
+  @helper.CSRF.formField
+  @helper.inputText($model;format="camel"$Form("name"))
+  @helper.inputText($model;format="camel"$Form("age"))
+  <input type="submit" value="submit"/>
+}
diff --git a/backend-services/feed-service/.g8/form/default.properties b/backend-services/feed-service/.g8/form/default.properties
new file mode 100644
index 0000000000000000000000000000000000000000..32090f30cb4cc9955f1fca778b4b41772709f90c
--- /dev/null
+++ b/backend-services/feed-service/.g8/form/default.properties
@@ -0,0 +1,2 @@
+description = Generates a Controller with form handling
+model = user
diff --git a/backend-services/feed-service/.g8/form/test/controllers/$model__Camel$ControllerSpec.scala b/backend-services/feed-service/.g8/form/test/controllers/$model__Camel$ControllerSpec.scala
new file mode 100644
index 0000000000000000000000000000000000000000..d25174315b09b99cac91b38ff9c6fdf344c3c577
--- /dev/null
+++ b/backend-services/feed-service/.g8/form/test/controllers/$model__Camel$ControllerSpec.scala
@@ -0,0 +1,71 @@
+package controllers
+
+import play.api.mvc._
+import play.api.i18n._
+import org.scalatestplus.play._
+import org.scalatestplus.play.guice.GuiceOneAppPerTest
+import play.api.http.FileMimeTypes
+import play.api.test._
+import play.api.test.Helpers._
+import play.api.test.CSRFTokenHelper._
+
+import scala.concurrent.ExecutionContext
+
+/**
+ * $model;format="Camel"$ form controller specs
+ */
+class $model;format="Camel"$ControllerSpec extends PlaySpec with GuiceOneAppPerTest with Injecting {
+
+  // Provide stubs for components based off Helpers.stubControllerComponents()
+  class StubComponents(cc:ControllerComponents = stubControllerComponents()) extends MessagesControllerComponents {
+    override val parsers: PlayBodyParsers = cc.parsers
+    override val messagesApi: MessagesApi = cc.messagesApi
+    override val langs: Langs = cc.langs
+    override val fileMimeTypes: FileMimeTypes = cc.fileMimeTypes
+    override val executionContext: ExecutionContext = cc.executionContext
+    override val actionBuilder: ActionBuilder[Request, AnyContent] = cc.actionBuilder
+    override val messagesActionBuilder: MessagesActionBuilder = new DefaultMessagesActionBuilderImpl(parsers.default, messagesApi)(executionContext)
+  }
+
+  "$model;format="Camel"$Controller GET" should {
+
+    "render the index page from a new instance of controller" in {
+      val controller = new $model;format="Camel"$Controller(new StubComponents())
+      val request = FakeRequest().withCSRFToken
+      val home = controller.$model;format="camel"$Get().apply(request)
+
+      status(home) mustBe OK
+      contentType(home) mustBe Some("text/html")
+    }
+
+    "render the index page from the application" in {
+      val controller = inject[$model;format="Camel"$Controller]
+      val request = FakeRequest().withCSRFToken
+      val home = controller.$model;format="camel"$Get().apply(request)
+
+      status(home) mustBe OK
+      contentType(home) mustBe Some("text/html")
+    }
+
+    "render the index page from the router" in {
+      val request = CSRFTokenHelper.addCSRFToken(FakeRequest(GET, "/$model;format="camel"$"))
+      val home = route(app, request).get
+
+      status(home) mustBe OK
+      contentType(home) mustBe Some("text/html")
+    }
+  }
+
+  "$model;format="Camel"$Controller POST" should {
+    "process form" in {
+      val request = {
+        FakeRequest(POST, "/$model;format="camel"$")
+          .withFormUrlEncodedBody("name" -> "play", "age" -> "4")
+      }
+      val home = route(app, request).get
+
+      status(home) mustBe SEE_OTHER
+    }
+  }
+
+}
diff --git a/backend-services/feed-service/.gitignore b/backend-services/feed-service/.gitignore
new file mode 100644
index 0000000000000000000000000000000000000000..dce73038415f7e68f232c49cefe21ad58a9056e7
--- /dev/null
+++ b/backend-services/feed-service/.gitignore
@@ -0,0 +1,9 @@
+logs
+target
+/.bsp
+/.idea
+/.idea_modules
+/.classpath
+/.project
+/.settings
+/RUNNING_PID
diff --git a/backend-services/feed-service/Dockerfile b/backend-services/feed-service/Dockerfile
new file mode 100644
index 0000000000000000000000000000000000000000..34a02ae0137be7841d93128e3a8c06ecba521a96
--- /dev/null
+++ b/backend-services/feed-service/Dockerfile
@@ -0,0 +1,9 @@
+FROM sbtscala/scala-sbt:eclipse-temurin-focal-11.0.17_8_1.8.2_2.13.10
+
+WORKDIR /feed-service/app
+
+ADD . .
+
+EXPOSE 9000
+
+CMD sbt run
diff --git a/backend-services/feed-service/app/controllers/HomeController.scala b/backend-services/feed-service/app/controllers/HomeController.scala
new file mode 100644
index 0000000000000000000000000000000000000000..60a6e853619c672b573c0e1b974e44f16f86bf5d
--- /dev/null
+++ b/backend-services/feed-service/app/controllers/HomeController.scala
@@ -0,0 +1,24 @@
+package controllers
+
+import javax.inject._
+import play.api._
+import play.api.mvc._
+
+/**
+ * This controller creates an `Action` to handle HTTP requests to the
+ * application's home page.
+ */
+@Singleton
+class HomeController @Inject()(val controllerComponents: ControllerComponents) extends BaseController {
+
+  /**
+   * Create an Action to render an HTML page.
+   *
+   * The configuration in the `routes` file means that this method
+   * will be called when the application receives a `GET` request with
+   * a path of `/`.
+   */
+  def index() = Action { implicit request: Request[AnyContent] =>
+    Ok("OK")
+  }
+}
diff --git a/backend-services/feed-service/app/controllers/MongoTestController.scala b/backend-services/feed-service/app/controllers/MongoTestController.scala
new file mode 100644
index 0000000000000000000000000000000000000000..c086129a767005645bf5a1b040cb5375a3f0914e
--- /dev/null
+++ b/backend-services/feed-service/app/controllers/MongoTestController.scala
@@ -0,0 +1,49 @@
+package controllers
+
+import javax.inject._
+import play.api._
+import play.api.mvc._
+
+import models.MongoDBClient
+import org.mongodb.scala.{Document}
+import scala.concurrent.ExecutionContext.Implicits.global
+import scala.concurrent.{Future, Await, TimeoutException}
+import scala.concurrent.duration._
+
+/**
+ * This controller creates an `Action` to handle HTTP MongoDB requests.
+ */
+@Singleton
+class MongoTestController @Inject()(val controllerComponents: ControllerComponents) extends BaseController {
+
+    /**
+    * Create an Action to test the Mongo Client.
+    */
+    def index() = Action { implicit request: Request[AnyContent] =>
+        println("MongoController")
+
+        var database_name = "{DATABASE_NAME}"
+        var collection_name = "{COLLECTION_NAME}"
+
+        var mongo = new MongoDBClient()
+
+        // Sequentially waits for Future objects to complete before calling next method
+        val result: Future[Seq[Document]] = for {
+            db <- mongo.getDatabase(database_name)
+            collection <- mongo.getCollection(db, collection_name)
+            findResult <- mongo.find(collection)
+        } yield findResult
+
+
+        try {
+            // Wait for 10 seconds for the Future to complete
+            val resultCompleted = Await.result(result, 4.seconds)
+
+            val jsonResult: Seq[String] = resultCompleted.map(doc => doc.toJson())
+            Ok(jsonResult.toString())
+        } catch {
+            case e: TimeoutException =>
+                BadRequest("Request timed out")
+        }
+    }
+}
diff --git a/backend-services/feed-service/app/models/MongoDBClient.scala b/backend-services/feed-service/app/models/MongoDBClient.scala
new file mode 100644
index 0000000000000000000000000000000000000000..96c5dd630909f964630b16097b7fb77cb7820711
--- /dev/null
+++ b/backend-services/feed-service/app/models/MongoDBClient.scala
@@ -0,0 +1,96 @@
+package models
+
+import utils.ConfigHelper
+
+import org.mongodb.scala.{MongoClient, MongoDatabase, MongoCollection, Document, FindObservable, Observer, Observable}
+import org.mongodb.scala.model.{Filters, Projections, Sorts}
+import org.bson.conversions.Bson
+
+import scala.concurrent.ExecutionContext.Implicits.global
+import scala.concurrent.Future
+import scala.util.{Success, Failure, Try}
+
+
+/**
+ * A MongoDB client for connecting to and interacting with a MongoDB database.
+ * 
+ * @constructor Creates a new instance of the MongoDBClient class.
+ */
+class MongoDBClient {
+    private val mongoUri = ConfigHelper.getString("mongodb.uri")
+
+    // Connects to a MongoDB Client when class is constructed
+    private var client: MongoClient = this.connect()
+
+    /**
+     * Connects to a MongoDB database using the default MongoDB connection string.
+     * 
+     * @return A MongoClient instance.
+     */
+    def connect(): MongoClient = {
+        MongoClient(mongoUri)
+    }
+
+    /**
+     * Gets a reference to a MongoDB database.
+     * 
+     * @param database The name of the database to retrieve.
+     * @return A Future containing a MongoDatabase instance.
+     */
+    def getDatabase(database: String): Future[MongoDatabase] = Future {
+        client.getDatabase(database)
+    }
+
+    /**
+     * Gets a reference to a MongoDB collection within a database.
+     * 
+     * @param database The MongoDatabase instance containing the desired collection.
+     * @param collection The name of the collection to retrieve.
+     * @return A Future containing a MongoCollection instance.
+     */
+    def getCollection(database: MongoDatabase, collection: String): Future[MongoCollection[Document]] = Future {
+        database.getCollection(collection)
+    }
+
+    /**
+     * Finds documents in a MongoDB collection.
+     * 
+     * @param collection The MongoCollection instance to search.
+     * @param filter A Bson filter to apply to the search.
+     * @param projection A Bson projection to apply to the search.
+     * @param sort A Bson sort to apply to the search.
+     * @return A Future containing a sequence of matching documents as Documents.
+     */
+    def find(
+        collection: MongoCollection[Document], 
+        filter: Bson = Filters.empty(), 
+        projection: Bson = Projections.excludeId(),
+        sort: Bson = Sorts.ascending("_id")
+    ): Future[Seq[Document]] = {
+        collection.find(filter)
+        .projection(projection)
+        .sort(sort)
+        .toFuture()
+    }
+
+    /**
+     * Inserts a document into a MongoDB collection.
+     * 
+     * @param collection The MongoCollection instance to insert into.
+     * @param document The document to insert.
+     * @return A Future containing the ID of the inserted document.
+     * @throws RuntimeException if the insertion was not acknowledged by the database.
+     */
+    def insertOne(collection: MongoCollection[Document], document: Document): Future[String] = {
+        val futureResult = collection.insertOne(document).toFuture()
+        
+        futureResult.map(result => {
+            if (result.wasAcknowledged()) {
+                // Grab the generated ID of the inserted document
+                result.getInsertedId().asObjectId.getValue().toString()
+            } else {
+                throw new RuntimeException("Insertion was not acknowledged")
+            }
+        })
+    }
+}
diff --git a/backend-services/feed-service/app/utils/ConfigHelper.scala b/backend-services/feed-service/app/utils/ConfigHelper.scala
new file mode 100644
index 0000000000000000000000000000000000000000..06b6cc3bb81a42481f354820be45367cff6b8bb6
--- /dev/null
+++ b/backend-services/feed-service/app/utils/ConfigHelper.scala
@@ -0,0 +1,11 @@
+package utils
+
+import com.typesafe.config.{Config, ConfigFactory}
+
+object ConfigHelper {
+  private val applicationConfig: Config = ConfigFactory.load("application.conf")
+  private val referenceConfig: Config = ConfigFactory.parseResources("reference.conf")
+  private val config: Config = referenceConfig.withFallback(applicationConfig).resolve()
+
+  def getString(key: String): String = config.getString(key)
+}
diff --git a/backend-services/feed-service/build.sbt b/backend-services/feed-service/build.sbt
new file mode 100644
index 0000000000000000000000000000000000000000..ad929924b648464b550c0b595083d5984381e964
--- /dev/null
+++ b/backend-services/feed-service/build.sbt
@@ -0,0 +1,18 @@
+name := """feed-service"""
+organization := "com.daily"
+
+version := "1.0.0"
+
+lazy val root = (project in file(".")).enablePlugins(PlayScala)
+
+scalaVersion := "2.13.10"
+
+libraryDependencies += guice
+libraryDependencies += "org.scalatestplus.play" %% "scalatestplus-play" % "5.0.0" % Test
+
+// Adds additional packages into Twirl
+//TwirlKeys.templateImports += "com.daily.controllers._"
+
+// Adds additional packages into conf/routes
+// play.sbt.routes.RoutesKeys.routesImport += "com.daily.binders._"
+libraryDependencies += "org.mongodb.scala" %% "mongo-scala-driver" % "4.3.0"
diff --git a/backend-services/feed-service/build.sc b/backend-services/feed-service/build.sc
new file mode 100644
index 0000000000000000000000000000000000000000..fe14b81a812a0ff0be0144f12d4901153f80af4b
--- /dev/null
+++ b/backend-services/feed-service/build.sc
@@ -0,0 +1,11 @@
+import mill._
+import $ivy.`com.lihaoyi::mill-contrib-playlib:`,  mill.playlib._
+
+object feedservice extends PlayModule with SingleModule {
+
+  def scalaVersion = "2.13.10"
+  def playVersion = "2.8.19"
+  def twirlVersion = "1.5.1"
+
+  object test extends PlayTests
+}
diff --git a/backend-services/feed-service/conf/application.conf b/backend-services/feed-service/conf/application.conf
new file mode 100644
index 0000000000000000000000000000000000000000..852c11d6e6d10588b23cae3f2b3e8131c4827c11
--- /dev/null
+++ b/backend-services/feed-service/conf/application.conf
@@ -0,0 +1,4 @@
+# Default Configuration File
+
+# MongoDB Connection Strings
+mongodb.uri = "mongodb://localhost:27017/"
diff --git a/backend-services/feed-service/conf/logback.xml b/backend-services/feed-service/conf/logback.xml
new file mode 100644
index 0000000000000000000000000000000000000000..a73d2016eb86a363ba7e705f4023ee2da87672fa
--- /dev/null
+++ b/backend-services/feed-service/conf/logback.xml
@@ -0,0 +1,40 @@
+<!-- https://www.playframework.com/documentation/latest/SettingsLogger -->
+<configuration>
+
+  <appender name="FILE" class="ch.qos.logback.core.FileAppender">
+    <file>${application.home:-.}/logs/application.log</file>
+    <encoder>
+      <charset>UTF-8</charset>
+      <pattern>
+        %d{yyyy-MM-dd HH:mm:ss} %highlight(%-5level) %cyan(%logger{36}) %magenta(%X{akkaSource}) %msg%n
+      </pattern>
+    </encoder>
+  </appender>
+
+  <appender name="STDOUT" class="ch.qos.logback.core.ConsoleAppender">
+    <withJansi>true</withJansi>
+    <encoder>
+      <charset>UTF-8</charset>
+      <pattern>
+        %d{yyyy-MM-dd HH:mm:ss} %highlight(%-5level) %cyan(%logger{36}) %magenta(%X{akkaSource}) %msg%n
+      </pattern>
+    </encoder>
+  </appender>
+
+  <appender name="ASYNCFILE" class="ch.qos.logback.classic.AsyncAppender">
+    <appender-ref ref="FILE" />
+  </appender>
+
+  <appender name="ASYNCSTDOUT" class="ch.qos.logback.classic.AsyncAppender">
+    <appender-ref ref="STDOUT" />
+  </appender>
+
+  <logger name="play" level="INFO" />
+  <logger name="application" level="DEBUG" />
+
+  <root level="WARN">
+    <appender-ref ref="ASYNCFILE" />
+    <appender-ref ref="ASYNCSTDOUT" />
+  </root>
+
+</configuration>
diff --git a/backend-services/feed-service/conf/messages b/backend-services/feed-service/conf/messages
new file mode 100644
index 0000000000000000000000000000000000000000..0226738a648fe29c551b43fe4bddaf8a39977e4f
--- /dev/null
+++ b/backend-services/feed-service/conf/messages
@@ -0,0 +1 @@
+# https://www.playframework.com/documentation/latest/ScalaI18N
diff --git a/backend-services/feed-service/conf/reference.conf b/backend-services/feed-service/conf/reference.conf
new file mode 100644
index 0000000000000000000000000000000000000000..1eba4d767f858cae4f72900eb06b7f47bfbbf5f1
--- /dev/null
+++ b/backend-services/feed-service/conf/reference.conf
@@ -0,0 +1,4 @@
+# Configuration File to be replaced with environment variables, if present
+
+# MongoDB Connection Strings
+mongodb.uri = ${?MONGO_URI}
diff --git a/backend-services/feed-service/conf/routes b/backend-services/feed-service/conf/routes
new file mode 100644
index 0000000000000000000000000000000000000000..c987e3139a94547944c6f45cb7398242a2986f69
--- /dev/null
+++ b/backend-services/feed-service/conf/routes
@@ -0,0 +1,12 @@
+# Routes
+# This file defines all application routes (Higher priority routes first)
+# https://www.playframework.com/documentation/latest/ScalaRouting
+# ~~~~
+
+# An example controller showing a sample home page
+GET     /                           controllers.HomeController.index()
+
+# Map static resources from the /public folder to the /assets URL path
+GET     /assets/*file               controllers.Assets.versioned(path="/public", file: Asset)
+
+GET     /mongo_test                 controllers.MongoTestController.index()
diff --git a/backend-services/feed-service/project/build.properties b/backend-services/feed-service/project/build.properties
new file mode 100644
index 0000000000000000000000000000000000000000..563a014da4aae6dcdf1d6c1b3a74c728e4bd6f5e
--- /dev/null
+++ b/backend-services/feed-service/project/build.properties
@@ -0,0 +1 @@
+sbt.version=1.7.2
diff --git a/backend-services/feed-service/project/plugins.sbt b/backend-services/feed-service/project/plugins.sbt
new file mode 100644
index 0000000000000000000000000000000000000000..8846622eca954bfb69de96dea021ca9d3f2aa767
--- /dev/null
+++ b/backend-services/feed-service/project/plugins.sbt
@@ -0,0 +1,2 @@
+addSbtPlugin("com.typesafe.play" % "sbt-plugin" % "2.8.19")
+addSbtPlugin("org.foundweekends.giter8" % "sbt-giter8-scaffold" % "0.13.1")
diff --git a/backend-services/feed-service/public/images/favicon.png b/backend-services/feed-service/public/images/favicon.png
new file mode 100644
index 0000000000000000000000000000000000000000..c7d92d2ae47434d9a61c90bc205e099b673b9dd5
Binary files /dev/null and b/backend-services/feed-service/public/images/favicon.png differ
diff --git a/backend-services/feed-service/public/javascripts/main.js b/backend-services/feed-service/public/javascripts/main.js
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/backend-services/feed-service/public/stylesheets/main.css b/backend-services/feed-service/public/stylesheets/main.css
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/backend-services/feed-service/test/controllers/HomeControllerSpec.scala b/backend-services/feed-service/test/controllers/HomeControllerSpec.scala
new file mode 100644
index 0000000000000000000000000000000000000000..97947556d450c154b7a8a4843d48a522d597be9b
--- /dev/null
+++ b/backend-services/feed-service/test/controllers/HomeControllerSpec.scala
@@ -0,0 +1,45 @@
+package controllers
+
+import org.scalatestplus.play._
+import org.scalatestplus.play.guice._
+import play.api.test._
+import play.api.test.Helpers._
+
+/**
+ * Add your spec here.
+ * You can mock out a whole application including requests, plugins etc.
+ *
+ * For more information, see https://www.playframework.com/documentation/latest/ScalaTestingWithScalaTest
+ */
+class HomeControllerSpec extends PlaySpec with GuiceOneAppPerTest with Injecting {
+
+  "HomeController GET" should {
+
+    "render the index page from a new instance of controller" in {
+      val controller = new HomeController(stubControllerComponents())
+      val home = controller.index().apply(FakeRequest(GET, "/"))
+
+      status(home) mustBe OK
+      contentType(home) mustBe Some("text/html")
+      contentAsString(home) must include ("Welcome to Play")
+    }
+
+    "render the index page from the application" in {
+      val controller = inject[HomeController]
+      val home = controller.index().apply(FakeRequest(GET, "/"))
+
+      status(home) mustBe OK
+      contentType(home) mustBe Some("text/html")
+      contentAsString(home) must include ("Welcome to Play")
+    }
+
+    "render the index page from the router" in {
+      val request = FakeRequest(GET, "/")
+      val home = route(app, request).get
+
+      status(home) mustBe OK
+      contentType(home) mustBe Some("text/html")
+      contentAsString(home) must include ("Welcome to Play")
+    }
+  }
+}
diff --git a/daily-thought-frontend/package-lock.json b/daily-thought-frontend/package-lock.json
index 6e94f5f440433131091c30e9f1a7ea44cc567e3b..6a9d97a235434673b2cc4465ab15551d5216209c 100644
--- a/daily-thought-frontend/package-lock.json
+++ b/daily-thought-frontend/package-lock.json
@@ -8,14 +8,42 @@
       "name": "daily-thought-frontend",
       "version": "0.1.0",
       "dependencies": {
+        "@headlessui/react": "^1.7.13",
+        "@heroicons/react": "^2.0.16",
         "next": "^13.2.4"
       },
       "devDependencies": {
         "@types/node": "18.15.0",
         "@types/react": "18.0.28",
+        "autoprefixer": "^10.4.14",
+        "postcss": "^8.4.21",
+        "tailwindcss": "^3.2.7",
         "typescript": "4.9.5"
       }
     },
+    "node_modules/@headlessui/react": {
+      "version": "1.7.13",
+      "resolved": "https://registry.npmjs.org/@headlessui/react/-/react-1.7.13.tgz",
+      "integrity": "sha512-9n+EQKRtD9266xIHXdY5MfiXPDfYwl7zBM7KOx2Ae3Gdgxy8QML1FkCMjq6AsOf0l6N9uvI4HcFtuFlenaldKg==",
+      "dependencies": {
+        "client-only": "^0.0.1"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "react": "^16 || ^17 || ^18",
+        "react-dom": "^16 || ^17 || ^18"
+      }
+    },
+    "node_modules/@heroicons/react": {
+      "version": "2.0.16",
+      "resolved": "https://registry.npmjs.org/@heroicons/react/-/react-2.0.16.tgz",
+      "integrity": "sha512-x89rFxH3SRdYaA+JCXwfe+RkE1SFTo9GcOkZettHer71Y3T7V+ogKmfw5CjTazgS3d0ClJ7p1NA+SP7VQLQcLw==",
+      "peerDependencies": {
+        "react": ">= 16"
+      }
+    },
     "node_modules/@next/env": {
       "version": "13.2.4",
       "resolved": "https://registry.npmjs.org/@next/env/-/env-13.2.4.tgz",
@@ -216,6 +244,41 @@
         "node": ">= 10"
       }
     },
+    "node_modules/@nodelib/fs.scandir": {
+      "version": "2.1.5",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
+      "integrity": "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==",
+      "dev": true,
+      "dependencies": {
+        "@nodelib/fs.stat": "2.0.5",
+        "run-parallel": "^1.1.9"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@nodelib/fs.stat": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz",
+      "integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==",
+      "dev": true,
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@nodelib/fs.walk": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz",
+      "integrity": "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==",
+      "dev": true,
+      "dependencies": {
+        "@nodelib/fs.scandir": "2.1.5",
+        "fastq": "^1.6.0"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
     "node_modules/@swc/helpers": {
       "version": "0.4.14",
       "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.4.14.tgz",
@@ -253,6 +316,148 @@
       "integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==",
       "dev": true
     },
+    "node_modules/acorn": {
+      "version": "7.4.1",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-7.4.1.tgz",
+      "integrity": "sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==",
+      "dev": true,
+      "bin": {
+        "acorn": "bin/acorn"
+      },
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
+    "node_modules/acorn-node": {
+      "version": "1.8.2",
+      "resolved": "https://registry.npmjs.org/acorn-node/-/acorn-node-1.8.2.tgz",
+      "integrity": "sha512-8mt+fslDufLYntIoPAaIMUe/lrbrehIiwmR3t2k9LljIzoigEPF27eLk2hy8zSGzmR/ogr7zbRKINMo1u0yh5A==",
+      "dev": true,
+      "dependencies": {
+        "acorn": "^7.0.0",
+        "acorn-walk": "^7.0.0",
+        "xtend": "^4.0.2"
+      }
+    },
+    "node_modules/acorn-walk": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-7.2.0.tgz",
+      "integrity": "sha512-OPdCF6GsMIP+Az+aWfAAOEt2/+iVDKE7oy6lJ098aoe59oAmK76qV6Gw60SbZ8jHuG2wH058GF4pLFbYamYrVA==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
+    "node_modules/anymatch": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
+      "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
+      "dev": true,
+      "dependencies": {
+        "normalize-path": "^3.0.0",
+        "picomatch": "^2.0.4"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/arg": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz",
+      "integrity": "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==",
+      "dev": true
+    },
+    "node_modules/autoprefixer": {
+      "version": "10.4.14",
+      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.14.tgz",
+      "integrity": "sha512-FQzyfOsTlwVzjHxKEqRIAdJx9niO6VCBCoEwax/VLSoQF29ggECcPuBqUMZ+u8jCZOPSy8b8/8KnuFbp0SaFZQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/autoprefixer"
+        }
+      ],
+      "dependencies": {
+        "browserslist": "^4.21.5",
+        "caniuse-lite": "^1.0.30001464",
+        "fraction.js": "^4.2.0",
+        "normalize-range": "^0.1.2",
+        "picocolors": "^1.0.0",
+        "postcss-value-parser": "^4.2.0"
+      },
+      "bin": {
+        "autoprefixer": "bin/autoprefixer"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      },
+      "peerDependencies": {
+        "postcss": "^8.1.0"
+      }
+    },
+    "node_modules/binary-extensions": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",
+      "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/braces": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
+      "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
+      "dev": true,
+      "dependencies": {
+        "fill-range": "^7.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/browserslist": {
+      "version": "4.21.5",
+      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.21.5.tgz",
+      "integrity": "sha512-tUkiguQGW7S3IhB7N+c2MV/HZPSCPAAiYBZXLsBhFB/PCy6ZKKsZrmBayHV9fdGV/ARIfJ14NkxKzRDjvp7L6w==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/browserslist"
+        }
+      ],
+      "dependencies": {
+        "caniuse-lite": "^1.0.30001449",
+        "electron-to-chromium": "^1.4.284",
+        "node-releases": "^2.0.8",
+        "update-browserslist-db": "^1.0.10"
+      },
+      "bin": {
+        "browserslist": "cli.js"
+      },
+      "engines": {
+        "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
+      }
+    },
+    "node_modules/camelcase-css": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz",
+      "integrity": "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==",
+      "dev": true,
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/caniuse-lite": {
       "version": "1.0.30001464",
       "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001464.tgz",
@@ -268,23 +473,302 @@
         }
       ]
     },
+    "node_modules/chokidar": {
+      "version": "3.5.3",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz",
+      "integrity": "sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://paulmillr.com/funding/"
+        }
+      ],
+      "dependencies": {
+        "anymatch": "~3.1.2",
+        "braces": "~3.0.2",
+        "glob-parent": "~5.1.2",
+        "is-binary-path": "~2.1.0",
+        "is-glob": "~4.0.1",
+        "normalize-path": "~3.0.0",
+        "readdirp": "~3.6.0"
+      },
+      "engines": {
+        "node": ">= 8.10.0"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.2"
+      }
+    },
+    "node_modules/chokidar/node_modules/glob-parent": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+      "dev": true,
+      "dependencies": {
+        "is-glob": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/client-only": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz",
       "integrity": "sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA=="
     },
+    "node_modules/color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+      "dev": true
+    },
+    "node_modules/cssesc": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
+      "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
+      "dev": true,
+      "bin": {
+        "cssesc": "bin/cssesc"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/csstype": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.1.tgz",
       "integrity": "sha512-DJR/VvkAvSZW9bTouZue2sSxDwdTN92uHjqeKVm+0dAqdfNykRzQ95tay8aXMBAAPpUiq4Qcug2L7neoRh2Egw==",
       "dev": true
     },
+    "node_modules/defined": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/defined/-/defined-1.0.1.tgz",
+      "integrity": "sha512-hsBd2qSVCRE+5PmNdHt1uzyrFu5d3RwmFDKzyNZMFq/EwDNJF7Ee5+D5oEKF0hU6LhtoUF1macFvOe4AskQC1Q==",
+      "dev": true,
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/detective": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/detective/-/detective-5.2.1.tgz",
+      "integrity": "sha512-v9XE1zRnz1wRtgurGu0Bs8uHKFSTdteYZNbIPFVhUZ39L/S79ppMpdmVOZAnoz1jfEFodc48n6MX483Xo3t1yw==",
+      "dev": true,
+      "dependencies": {
+        "acorn-node": "^1.8.2",
+        "defined": "^1.0.0",
+        "minimist": "^1.2.6"
+      },
+      "bin": {
+        "detective": "bin/detective.js"
+      },
+      "engines": {
+        "node": ">=0.8.0"
+      }
+    },
+    "node_modules/didyoumean": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
+      "integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==",
+      "dev": true
+    },
+    "node_modules/dlv": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz",
+      "integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==",
+      "dev": true
+    },
+    "node_modules/electron-to-chromium": {
+      "version": "1.4.328",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.328.tgz",
+      "integrity": "sha512-DE9tTy2PNmy1v55AZAO542ui+MLC2cvINMK4P2LXGsJdput/ThVG9t+QGecPuAZZSgC8XoI+Jh9M1OG9IoNSCw==",
+      "dev": true
+    },
+    "node_modules/escalade": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.1.tgz",
+      "integrity": "sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==",
+      "dev": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/fast-glob": {
+      "version": "3.2.12",
+      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.12.tgz",
+      "integrity": "sha512-DVj4CQIYYow0BlaelwK1pHl5n5cRSJfM60UA0zK891sVInoPri2Ekj7+e1CT3/3qxXenpI+nBBmQAcJPJgaj4w==",
+      "dev": true,
+      "dependencies": {
+        "@nodelib/fs.stat": "^2.0.2",
+        "@nodelib/fs.walk": "^1.2.3",
+        "glob-parent": "^5.1.2",
+        "merge2": "^1.3.0",
+        "micromatch": "^4.0.4"
+      },
+      "engines": {
+        "node": ">=8.6.0"
+      }
+    },
+    "node_modules/fast-glob/node_modules/glob-parent": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+      "dev": true,
+      "dependencies": {
+        "is-glob": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/fastq": {
+      "version": "1.15.0",
+      "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.15.0.tgz",
+      "integrity": "sha512-wBrocU2LCXXa+lWBt8RoIRD89Fi8OdABODa/kEnyeyjS5aZO5/GNvI5sEINADqP/h8M29UHTHUb53sUu5Ihqdw==",
+      "dev": true,
+      "dependencies": {
+        "reusify": "^1.0.4"
+      }
+    },
+    "node_modules/fill-range": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
+      "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
+      "dev": true,
+      "dependencies": {
+        "to-regex-range": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/fraction.js": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.2.0.tgz",
+      "integrity": "sha512-MhLuK+2gUcnZe8ZHlaaINnQLl0xRIGRfcGk2yl8xoQAfHrSsL3rYu6FCmBdkdbhc9EPlwyGHewaRsvwRMJtAlA==",
+      "dev": true,
+      "engines": {
+        "node": "*"
+      },
+      "funding": {
+        "type": "patreon",
+        "url": "https://www.patreon.com/infusion"
+      }
+    },
+    "node_modules/fsevents": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
+      "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
+      "dev": true,
+      "hasInstallScript": true,
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+      }
+    },
+    "node_modules/function-bind": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
+      "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==",
+      "dev": true
+    },
+    "node_modules/glob-parent": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
+      "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==",
+      "dev": true,
+      "dependencies": {
+        "is-glob": "^4.0.3"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
+    "node_modules/has": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
+      "integrity": "sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==",
+      "dev": true,
+      "dependencies": {
+        "function-bind": "^1.1.1"
+      },
+      "engines": {
+        "node": ">= 0.4.0"
+      }
+    },
+    "node_modules/is-binary-path": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
+      "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
+      "dev": true,
+      "dependencies": {
+        "binary-extensions": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/is-core-module": {
+      "version": "2.11.0",
+      "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.11.0.tgz",
+      "integrity": "sha512-RRjxlvLDkD1YJwDbroBHMb+cukurkDWNyHx7D3oNB5x9rb5ogcksMC5wHCadcXoo67gVr/+3GFySh3134zi6rw==",
+      "dev": true,
+      "dependencies": {
+        "has": "^1.0.3"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-extglob": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
+      "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-glob": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
+      "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
+      "dev": true,
+      "dependencies": {
+        "is-extglob": "^2.1.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-number": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
+      "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.12.0"
+      }
+    },
     "node_modules/js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
       "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
       "peer": true
     },
+    "node_modules/lilconfig": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-2.1.0.tgz",
+      "integrity": "sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/loose-envify": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
@@ -297,6 +781,37 @@
         "loose-envify": "cli.js"
       }
     },
+    "node_modules/merge2": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
+      "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==",
+      "dev": true,
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/micromatch": {
+      "version": "4.0.5",
+      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.5.tgz",
+      "integrity": "sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==",
+      "dev": true,
+      "dependencies": {
+        "braces": "^3.0.2",
+        "picomatch": "^2.3.1"
+      },
+      "engines": {
+        "node": ">=8.6"
+      }
+    },
+    "node_modules/minimist": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.8.tgz",
+      "integrity": "sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==",
+      "dev": true,
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/nanoid": {
       "version": "3.3.4",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz",
@@ -363,15 +878,99 @@
         }
       }
     },
+    "node_modules/next/node_modules/postcss": {
+      "version": "8.4.14",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.14.tgz",
+      "integrity": "sha512-E398TUmfAYFPBSdzgeieK2Y1+1cpdxJx8yXbK/m57nRhKSmk1GB2tO4lbLBtlkfPQTDKfe4Xqv1ASWPpayPEig==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/postcss"
+        }
+      ],
+      "dependencies": {
+        "nanoid": "^3.3.4",
+        "picocolors": "^1.0.0",
+        "source-map-js": "^1.0.2"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      }
+    },
+    "node_modules/node-releases": {
+      "version": "2.0.10",
+      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.10.tgz",
+      "integrity": "sha512-5GFldHPXVG/YZmFzJvKK2zDSzPKhEp0+ZR5SVaoSag9fsL5YgHbUHDfnG5494ISANDcK4KwPXAx2xqVEydmd7w==",
+      "dev": true
+    },
+    "node_modules/normalize-path": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
+      "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/normalize-range": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/normalize-range/-/normalize-range-0.1.2.tgz",
+      "integrity": "sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/object-hash": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/object-hash/-/object-hash-3.0.0.tgz",
+      "integrity": "sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==",
+      "dev": true,
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/path-parse": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
+      "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
+      "dev": true
+    },
     "node_modules/picocolors": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
       "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ=="
     },
+    "node_modules/picomatch": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
+      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
+      "dev": true,
+      "engines": {
+        "node": ">=8.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
+    "node_modules/pify": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
+      "integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/postcss": {
-      "version": "8.4.14",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.14.tgz",
-      "integrity": "sha512-E398TUmfAYFPBSdzgeieK2Y1+1cpdxJx8yXbK/m57nRhKSmk1GB2tO4lbLBtlkfPQTDKfe4Xqv1ASWPpayPEig==",
+      "version": "8.4.21",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.21.tgz",
+      "integrity": "sha512-tP7u/Sn/dVxK2NnruI4H9BG+x+Wxz6oeZ1cJ8P6G/PZY0IKk4k/63TDsQf2kQq3+qoJeLm2kIBUNlZe3zgb4Zg==",
+      "dev": true,
       "funding": [
         {
           "type": "opencollective",
@@ -391,6 +990,122 @@
         "node": "^10 || ^12 || >=14"
       }
     },
+    "node_modules/postcss-import": {
+      "version": "14.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-14.1.0.tgz",
+      "integrity": "sha512-flwI+Vgm4SElObFVPpTIT7SU7R3qk2L7PyduMcokiaVKuWv9d/U+Gm/QAd8NDLuykTWTkcrjOeD2Pp1rMeBTGw==",
+      "dev": true,
+      "dependencies": {
+        "postcss-value-parser": "^4.0.0",
+        "read-cache": "^1.0.0",
+        "resolve": "^1.1.7"
+      },
+      "engines": {
+        "node": ">=10.0.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.0.0"
+      }
+    },
+    "node_modules/postcss-load-config": {
+      "version": "3.1.4",
+      "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-3.1.4.tgz",
+      "integrity": "sha512-6DiM4E7v4coTE4uzA8U//WhtPwyhiim3eyjEMFCnUpzbrkK9wJHgKDT2mR+HbtSrd/NubVaYTOpSpjUl8NQeRg==",
+      "dev": true,
+      "dependencies": {
+        "lilconfig": "^2.0.5",
+        "yaml": "^1.10.2"
+      },
+      "engines": {
+        "node": ">= 10"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/postcss/"
+      },
+      "peerDependencies": {
+        "postcss": ">=8.0.9",
+        "ts-node": ">=9.0.0"
+      },
+      "peerDependenciesMeta": {
+        "postcss": {
+          "optional": true
+        },
+        "ts-node": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/postcss-nested": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-6.0.0.tgz",
+      "integrity": "sha512-0DkamqrPcmkBDsLn+vQDIrtkSbNkv5AD/M322ySo9kqFkCIYklym2xEmWkwo+Y3/qZo34tzEPNUw4y7yMCdv5w==",
+      "dev": true,
+      "dependencies": {
+        "postcss-selector-parser": "^6.0.10"
+      },
+      "engines": {
+        "node": ">=12.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/postcss/"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.14"
+      }
+    },
+    "node_modules/postcss-selector-parser": {
+      "version": "6.0.11",
+      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.11.tgz",
+      "integrity": "sha512-zbARubNdogI9j7WY4nQJBiNqQf3sLS3wCP4WfOidu+p28LofJqDH1tcXypGrcmMHhDk2t9wGhCsYe/+szLTy1g==",
+      "dev": true,
+      "dependencies": {
+        "cssesc": "^3.0.0",
+        "util-deprecate": "^1.0.2"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/postcss-value-parser": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
+      "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
+      "dev": true
+    },
+    "node_modules/queue-microtask": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
+      "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ]
+    },
+    "node_modules/quick-lru": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/quick-lru/-/quick-lru-5.1.1.tgz",
+      "integrity": "sha512-WuyALRjWPDGtt/wzJiadO5AXY+8hZ80hVpe6MyivgraREW751X3SbhRvG3eLKOYN+8VEvqLcf3wdnt44Z4S4SA==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/react": {
       "version": "18.2.0",
       "resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz",
@@ -416,6 +1131,77 @@
         "react": "^18.2.0"
       }
     },
+    "node_modules/read-cache": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
+      "integrity": "sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==",
+      "dev": true,
+      "dependencies": {
+        "pify": "^2.3.0"
+      }
+    },
+    "node_modules/readdirp": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
+      "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
+      "dev": true,
+      "dependencies": {
+        "picomatch": "^2.2.1"
+      },
+      "engines": {
+        "node": ">=8.10.0"
+      }
+    },
+    "node_modules/resolve": {
+      "version": "1.22.1",
+      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.1.tgz",
+      "integrity": "sha512-nBpuuYuY5jFsli/JIs1oldw6fOQCBioohqWZg/2hiaOybXOft4lonv85uDOKXdf8rhyK159cxU5cDcK/NKk8zw==",
+      "dev": true,
+      "dependencies": {
+        "is-core-module": "^2.9.0",
+        "path-parse": "^1.0.7",
+        "supports-preserve-symlinks-flag": "^1.0.0"
+      },
+      "bin": {
+        "resolve": "bin/resolve"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/reusify": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz",
+      "integrity": "sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==",
+      "dev": true,
+      "engines": {
+        "iojs": ">=1.0.0",
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/run-parallel": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
+      "integrity": "sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "dependencies": {
+        "queue-microtask": "^1.2.2"
+      }
+    },
     "node_modules/scheduler": {
       "version": "0.23.0",
       "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.0.tgz",
@@ -455,6 +1241,90 @@
         }
       }
     },
+    "node_modules/supports-preserve-symlinks-flag": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
+      "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/tailwindcss": {
+      "version": "3.2.7",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.2.7.tgz",
+      "integrity": "sha512-B6DLqJzc21x7wntlH/GsZwEXTBttVSl1FtCzC8WP4oBc/NKef7kaax5jeihkkCEWc831/5NDJ9gRNDK6NEioQQ==",
+      "dev": true,
+      "dependencies": {
+        "arg": "^5.0.2",
+        "chokidar": "^3.5.3",
+        "color-name": "^1.1.4",
+        "detective": "^5.2.1",
+        "didyoumean": "^1.2.2",
+        "dlv": "^1.1.3",
+        "fast-glob": "^3.2.12",
+        "glob-parent": "^6.0.2",
+        "is-glob": "^4.0.3",
+        "lilconfig": "^2.0.6",
+        "micromatch": "^4.0.5",
+        "normalize-path": "^3.0.0",
+        "object-hash": "^3.0.0",
+        "picocolors": "^1.0.0",
+        "postcss": "^8.0.9",
+        "postcss-import": "^14.1.0",
+        "postcss-js": "^4.0.0",
+        "postcss-load-config": "^3.1.4",
+        "postcss-nested": "6.0.0",
+        "postcss-selector-parser": "^6.0.11",
+        "postcss-value-parser": "^4.2.0",
+        "quick-lru": "^5.1.1",
+        "resolve": "^1.22.1"
+      },
+      "bin": {
+        "tailwind": "lib/cli.js",
+        "tailwindcss": "lib/cli.js"
+      },
+      "engines": {
+        "node": ">=12.13.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.0.9"
+      }
+    },
+    "node_modules/tailwindcss/node_modules/postcss-js": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-4.0.1.tgz",
+      "integrity": "sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==",
+      "dev": true,
+      "dependencies": {
+        "camelcase-css": "^2.0.1"
+      },
+      "engines": {
+        "node": "^12 || ^14 || >= 16"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/postcss/"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4.21"
+      }
+    },
+    "node_modules/to-regex-range": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
+      "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
+      "dev": true,
+      "dependencies": {
+        "is-number": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=8.0"
+      }
+    },
     "node_modules/tslib": {
       "version": "2.5.0",
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.5.0.tgz",
@@ -472,6 +1342,56 @@
       "engines": {
         "node": ">=4.2.0"
       }
+    },
+    "node_modules/update-browserslist-db": {
+      "version": "1.0.10",
+      "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.0.10.tgz",
+      "integrity": "sha512-OztqDenkfFkbSG+tRxBeAnCVPckDBcvibKd35yDONx6OU8N7sqgwc7rCbkJ/WcYtVRZ4ba68d6byhC21GFh7sQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/browserslist"
+        }
+      ],
+      "dependencies": {
+        "escalade": "^3.1.1",
+        "picocolors": "^1.0.0"
+      },
+      "bin": {
+        "browserslist-lint": "cli.js"
+      },
+      "peerDependencies": {
+        "browserslist": ">= 4.21.0"
+      }
+    },
+    "node_modules/util-deprecate": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
+      "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
+      "dev": true
+    },
+    "node_modules/xtend": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz",
+      "integrity": "sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.4"
+      }
+    },
+    "node_modules/yaml": {
+      "version": "1.10.2",
+      "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz",
+      "integrity": "sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==",
+      "dev": true,
+      "engines": {
+        "node": ">= 6"
+      }
     }
   }
 }
diff --git a/daily-thought-frontend/package.json b/daily-thought-frontend/package.json
index e0c3a71de10633a4d86df5c2c5a6a86c3855caa4..5b67dc29ae684817a0823f5182c3b9aa2f1c1635 100644
--- a/daily-thought-frontend/package.json
+++ b/daily-thought-frontend/package.json
@@ -9,11 +9,16 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@headlessui/react": "^1.7.13",
+    "@heroicons/react": "^2.0.16",
     "next": "^13.2.4"
   },
   "devDependencies": {
     "@types/node": "18.15.0",
     "@types/react": "18.0.28",
+    "autoprefixer": "^10.4.14",
+    "postcss": "^8.4.21",
+    "tailwindcss": "^3.2.7",
     "typescript": "4.9.5"
   }
 }
diff --git a/daily-thought-frontend/postcss.config.js b/daily-thought-frontend/postcss.config.js
new file mode 100644
index 0000000000000000000000000000000000000000..33ad091d26d8a9dc95ebdf616e217d985ec215b8
--- /dev/null
+++ b/daily-thought-frontend/postcss.config.js
@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
diff --git a/daily-thought-frontend/src/components/comments/Comment.tsx b/daily-thought-frontend/src/components/comments/Comment.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..754572915a6f59bac3e4cb2d8a3f8b5f31a486a1
--- /dev/null
+++ b/daily-thought-frontend/src/components/comments/Comment.tsx
@@ -0,0 +1,32 @@
+import { Comment } from "@/types/comment"
+import { HeartIcon } from '@heroicons/react/24/outline'
+import { FC, PropsWithChildren } from "react"
+
+type CommentProps = {
+  Comment: Comment,
+
+}
+
+const Comment: FC<PropsWithChildren<CommentProps>> = ({
+  Comment
+}) => {
+
+  return (
+    <div className="w-full flex items-center justify-between p-2">
+      <div className="flex flex-1">
+        <div className="flex h-8 w-8 max-w-xs items-center justify-center rounded-full bg-c-pink text-sm focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-pink-400 mr-2">
+          <img className="h-8 w-8 rounded-full" src={Comment.User.Avatar} alt="" />
+        </div>
+        <div>
+          <p className="text-xs font-bold">{Comment.User.Name}</p>
+          <p className="text-sm">This is my comment</p>
+          <p className="text-xs text-gray-500">1 like</p>
+        </div>
+      </div>
+      
+      <HeartIcon className="block h-3 w-3" aria-hidden="true" />
+    </div>
+  )
+}
+
+export default Comment;
\ No newline at end of file
diff --git a/daily-thought-frontend/src/components/hero/Hero.tsx b/daily-thought-frontend/src/components/hero/Hero.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..34c364f29cca59caff6f50b83e6eebbdcff59287
--- /dev/null
+++ b/daily-thought-frontend/src/components/hero/Hero.tsx
@@ -0,0 +1,30 @@
+export default function Hero() {
+
+  return (
+    <div className="bg-c-pink">
+      <div className="relative isolate px-6 pt-14 lg:px-8">
+        <div className="mx-auto max-w-2xl py-32 sm:py-48 lg:py-56">
+          <div className="text-center">
+            <h1 className="text-4xl font-bold tracking-tight text-c-green sm:text-6xl">
+              Welcome to Daily
+            </h1>
+            <p className="mt-6 text-lg leading-8 text-white">
+              Hello there! Welcome to Daily - a social media plaform focussed on finding the answers to sometimes weird, always wonderful yet totally random daily thoughts. 
+            </p>
+            <div className="mt-10 flex items-center justify-center gap-x-6">
+              <a
+                href="#"
+                className="rounded-md bg-c-green px-3.5 py-2.5 text-sm font-semibold text-black shadow-sm hover:bg-white hover:text-c-pink focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-pink-400"
+              >
+                Sign Up
+              </a>
+              <a href="#" className="text-sm font-semibold leading-6 text-c-green">
+                Log In <span aria-hidden="true">→</span>
+              </a>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/daily-thought-frontend/src/components/navigation/NavBar.tsx b/daily-thought-frontend/src/components/navigation/NavBar.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..452b85c3fbd5c856e11710161d1305a42abbd164
--- /dev/null
+++ b/daily-thought-frontend/src/components/navigation/NavBar.tsx
@@ -0,0 +1,196 @@
+import { FC, Fragment, PropsWithChildren, useEffect, useState } from 'react'
+import { Disclosure, Menu, Transition } from '@headlessui/react'
+import { Bars3Icon, BellIcon, XMarkIcon } from '@heroicons/react/24/outline'
+import { User } from '@/types/user'
+
+const user = {
+  Name: 'Tom Cook',
+  email: 'tom@example.com',
+  username: 'TomCook',
+  imageUrl:
+    'https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',
+}
+const navigation = [
+  { name: 'My Feed', href: '#', current: true }
+]
+const userNavigation = [
+  { name: 'Your Profile', href: '#' },
+  { name: 'Settings', href: '#' },
+  { name: 'Sign out', href: '#' },
+]
+
+function classNames(...classes: any) {
+  return classes.filter(Boolean).join(' ')
+}
+
+type NavBarProps = {
+  user: User | null;
+}
+
+const NavBar: FC<PropsWithChildren<NavBarProps>> = ({
+  children,
+  user
+}) =>  {  
+  return (
+    <>
+      <div className="min-h-full min-w-full">
+        <Disclosure as="nav" className="bg-c-pink fixed w-full z-10">
+          {({ open }) => (
+            <>
+              <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+                <div className={`flex h-16 items-center justify-between`}>
+
+                  {user !== null &&
+                    <div className="flex items-center">
+                      <div className="hidden md:block">
+                        <div className="flex items-baseline space-x-4">
+                          {navigation.map((item) => (
+                            <a
+                              key={item.name}
+                              href={item.href}
+                              className={classNames(
+                                item.current
+                                  ? 'bg-c-pink text-white'
+                                  : 'text-c-pink hover:bg-c-pink hover:text-white',
+                                'rounded-md px-3 py-2 text-sm font-medium'
+                              )}
+                              aria-current={item.current ? 'page' : undefined}
+                            >
+                              {item.name}
+                            </a>
+                          ))}
+                        </div>
+                      </div>
+                    </div>
+                  }
+                  <div>
+                    <h1 className="text-2xl font-bold tracking-tight text-c-green">Daily</h1>
+                  </div>
+                  
+                  {user !== null && 
+                    <div className="hidden md:block">
+                      <div className="flex items-center">
+                        <button
+                          type="button"
+                          className="rounded-full bg-c-pink p-1 text-white hover:text-white focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-c-pink"
+                        >
+                          <span className="sr-only">View notifications</span>
+                          <BellIcon className="h-6 w-6" aria-hidden="true" />
+                        </button>
+
+                        {/* Profile dropdown */}
+                        <Menu as="div" className="relative ml-3">
+                          <div>
+                            <Menu.Button className="flex max-w-xs items-center rounded-full bg-green-400 text-sm focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-c-pink">
+                              <span className="sr-only">Open user menu</span>
+                              <img className="h-8 w-8 rounded-full" src={user.Avatar} alt="" />
+                            </Menu.Button>
+                          </div>
+                          <Transition
+                            as={Fragment}
+                            enter="transition ease-out duration-100"
+                            enterFrom="transform opacity-0 scale-95"
+                            enterTo="transform opacity-100 scale-100"
+                            leave="transition ease-in duration-75"
+                            leaveFrom="transform opacity-100 scale-100"
+                            leaveTo="transform opacity-0 scale-95"
+                          >
+                            <Menu.Items className="absolute right-0 z-10 mt-2 w-48 origin-top-right rounded-md bg-white py-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
+                              {userNavigation.map((item) => (
+                                <Menu.Item key={item.name}>
+                                  {({ active }) => (
+                                    <a
+                                      href={item.href}
+                                      className={classNames(
+                                        active ? 'bg-gray-100' : '',
+                                        'block px-4 py-2 text-sm text-gray-700'
+                                      )}
+                                    >
+                                      {item.name}
+                                    </a>
+                                  )}
+                                </Menu.Item>
+                              ))}
+                            </Menu.Items>
+                          </Transition>
+                        </Menu>
+                      </div>
+                    </div>
+                  }
+                  
+                  {user !== null && 
+                    <div className="-mr-2 flex md:hidden">
+                      {/* Mobile menu button */}
+                      <Disclosure.Button className="inline-flex items-center justify-center rounded-md bg-white p-2 text-c-pink hover:bg-c-pink hover:text-white focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-c-pink">
+                        <span className="sr-only">Open main menu</span>
+                        {open ? (
+                          <XMarkIcon className="block h-6 w-6" aria-hidden="true" />
+                        ) : (
+                          <Bars3Icon className="block h-6 w-6" aria-hidden="true" />
+                        )}
+                      </Disclosure.Button>
+                    </div>
+                  }
+                </div>
+              </div>
+
+              <Disclosure.Panel className="md:hidden">
+                <div className="space-y-1 px-2 pt-2 pb-3 sm:px-3 bg-c-pink">
+                  {navigation.map((item) => (
+                    <Disclosure.Button
+                      key={item.name}
+                      as="a"
+                      href={item.href}
+                      className={classNames(
+                        item.current ? 'bg-c-pink text-white' : 'text-gray-300 hover:bg-gray-700 hover:text-white',
+                        'block rounded-md px-3 py-2 text-base font-medium'
+                      )}
+                      aria-current={item.current ? 'page' : undefined}
+                    >
+                      {item.name}
+                    </Disclosure.Button>
+                  ))}
+                </div>
+                <div className=" pt-4 pb-3 bg-c-pink ">
+                  <div className="flex items-center px-5 bg-white mx-2 py-2 rounded-md">
+                    <div className="flex-shrink-0">
+                      <img className="h-10 w-10 rounded-full" src={user?.Avatar} alt="" />
+                    </div>
+                    <div className="ml-3">
+                      <div className="text-base font-medium leading-none text-grey-600">{user?.Name}</div>
+                      <div className="text-sm font-medium leading-none text-gray-400">{`@${user?.Username}`}</div>
+                    </div>
+                    <button
+                      type="button"
+                      className="ml-auto flex-shrink-0 rounded-full bg-c-pink p-1 text-white hover:text-c-pink hover:bg-white focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-c-pink"
+                    >
+                      <span className="sr-only">View notifications</span>
+                      <BellIcon className="h-6 w-6" aria-hidden="true" />
+                    </button>
+                  </div>
+                  <div className="mt-1 space-y-1 px-2">
+                    {userNavigation.map((item) => (
+                      <Disclosure.Button
+                        key={item.name}
+                        as="a"
+                        href={item.href}
+                        className="block bg-white rounded-md px-3 py-2 text-base font-medium text-c-pink hover:bg-pink-300 hover:text-green-200"
+                      >
+                        {item.name}
+                      </Disclosure.Button>
+                    ))}
+                  </div>
+                </div>
+              </Disclosure.Panel>
+            </>
+          )}
+        </Disclosure>
+        <main>
+          <div className="mx-auto">{children}</div>
+        </main>
+      </div>
+    </>
+  )
+}
+
+export default NavBar;
\ No newline at end of file
diff --git a/daily-thought-frontend/src/components/post/AnswerCard.tsx b/daily-thought-frontend/src/components/post/AnswerCard.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..c184ae7f7bf0e23b67d4a97d92bea5eaa0a6fd4f
--- /dev/null
+++ b/daily-thought-frontend/src/components/post/AnswerCard.tsx
@@ -0,0 +1,72 @@
+import { Post } from "@/types/post"
+import { FC, PropsWithChildren } from "react"
+import { EyeSlashIcon, HeartIcon, ChatBubbleLeftIcon } from '@heroicons/react/24/outline'
+import LikeStack from "./LikeStack"
+import Comment from "../comments/Comment"
+import styles from '../../styles/AnswerCard.module.css'
+
+type AnswerCardProps = {
+  post: Post;
+  commentLimit: number;
+}
+
+const AnswerCard: FC<PropsWithChildren<AnswerCardProps>> = ({
+  post,
+  commentLimit
+}) => {
+
+  return (
+    <div className="flex-1 rounded-3xl bg-white text-lg shadow-lg overflow-hidden relative">
+      <div className="p-4">
+        <p className="text-sm text-gray-600">{`${post.User.Name}'s answer`}</p>
+        <div>
+          This is my super duper answer. My name is Timmy C and I enjoy smooth jazz.
+        </div>
+        <div className="mt-2 flex ">
+          <div className="flex-1">
+            <button
+              type="button"
+              className="ml-auto mr-2 flex-shrink-0 rounded-full bg-white p-1 text-c-pink hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-c-pink"
+            >
+              <span className="sr-only">View notifications</span>
+              <HeartIcon className="h-6 w-6" aria-hidden="true"/>
+            </button>
+            <button
+              type="button"
+              className="ml-auto mr-2 flex-shrink-0 rounded-full bg-white p-1 text-c-pink hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-c-pink"
+            >
+              <span className="sr-only">View notifications</span>
+              <ChatBubbleLeftIcon className="h-6 w-6" aria-hidden="true"/>
+            </button>
+          </div>
+          <LikeStack Users={[post.User, post.User, post.User, post.User, post.User, post.User]} />
+        </div>
+      </div>
+
+    
+    
+
+    <div className="border-t bg-gray-50 p-2">
+      <p className="text-xs text-gray-500 hover:text-c-pink">View all 3 comments</p>
+      <Comment Comment={{Data: "asdfg", User: post.User}} />
+    </div>
+
+    {/* <div className={styles.hidden}>
+      <div className="flex justify-center flex-col  items-center">
+          <EyeSlashIcon className="h-10 w-10 text-c-pink"/>
+          <p className="text-sm text-c-pink">This post is hidden</p>
+
+          <button
+            className="rounded-md bg-white px-3.5 py-2 mt-2 text-xs font-semibold text-c-pink shadow-sm hover:bg-c-pink hover:text-white focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-pink-400"
+          >
+            Post your daily
+          </button>
+      </div>
+    </div> */}
+
+
+  </div>
+  )
+}
+
+export default AnswerCard
\ No newline at end of file
diff --git a/daily-thought-frontend/src/components/post/LikeStack.tsx b/daily-thought-frontend/src/components/post/LikeStack.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..5ab25e4e0d32f68710c6c9eaf3576993e9e7893b
--- /dev/null
+++ b/daily-thought-frontend/src/components/post/LikeStack.tsx
@@ -0,0 +1,42 @@
+import { User } from "@/types/user"
+import { FC, PropsWithChildren } from "react"
+
+type LikeStackProps = {
+  Users: User[]
+}
+
+const LikeStack:FC<PropsWithChildren<LikeStackProps>> = ({
+  Users
+}) => {
+
+  return (
+    <>
+      <div className="flex -space-x-1 overflow-hidden items-center">
+        {Users.map((user, index) => {
+          if(index < 3){
+            return (
+              <div>
+                <img
+                  className="inline-block h-6 w-6 rounded-full ring-2 ring-white"
+                  src={user.Avatar}
+                  alt=""
+                />
+              </div>
+            )
+          } else if (index === 3) {
+            return (
+              <div className="inline-block h-6 w-6 rounded-full ring-2 ring-white bg-gray-100 flex items-center justify-center">
+                <p className="text-c-pink text-xs">{`+${Users.length - 4}`}</p>
+              </div>
+            )
+          } else {
+            return (null)
+          }
+        })}
+        
+      </div>
+    </>
+  )
+}
+
+export default LikeStack;
\ No newline at end of file
diff --git a/daily-thought-frontend/src/components/post/Post.tsx b/daily-thought-frontend/src/components/post/Post.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..02f29df7c713c80907978432dc3b7c2216e651e5
--- /dev/null
+++ b/daily-thought-frontend/src/components/post/Post.tsx
@@ -0,0 +1,44 @@
+import { Post } from "@/types/post"
+
+import { FC, PropsWithChildren } from "react";
+import AnswerCard from "./AnswerCard";
+import LikeStack from "./LikeStack";
+
+type PostProps = {
+  post: Post;
+}
+
+const Post:FC<PropsWithChildren<PostProps>> = ({
+  post
+}) => {
+
+  return (
+    <>
+    <div className="flex w-full py-4 flex-col">
+
+      <div className="flex m-2 items-center">
+        <div className="flex h-12 w-12 max-w-xs items-center justify-center rounded-full bg-c-pink text-sm focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-pink-400 mr-2">
+          <img className="h-12 w-12 rounded-full" src={post.User.Avatar} alt="" />
+        </div>
+        <div className="flex-1 flex-col">
+          <p className="">{post.User.Name}</p>
+          <p className="text-sm text-gray-500">{`@${post.User.Username}`}</p>
+        </div>
+        <div className="flex flex-col justify-end">
+          <p className="text-xs text-gray-500">Just now</p>
+        </div>
+      </div>
+
+
+      <div className="flex-1 rounded-3xl font-white md:ml-16">
+        <AnswerCard post={post}/>
+      </div> 
+
+       
+    </div>
+            
+    </>
+  )
+}
+
+export default Post
\ No newline at end of file
diff --git a/daily-thought-frontend/src/components/question/Question.tsx b/daily-thought-frontend/src/components/question/Question.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..955850ca3c8f9f6f7c046892e3727405bdd7e0eb
--- /dev/null
+++ b/daily-thought-frontend/src/components/question/Question.tsx
@@ -0,0 +1,14 @@
+const Question = () => {
+
+  return (
+      <div className="max-w-2xl lg:max-w-4xl border border-pink-400 border-2 p-5 rounded-full m-3">
+          <blockquote className="text-center text-xl font-semibold leading-8 text-pink-400 sm:text-2xl sm:leading-9">
+            <p>
+              <span className="text-green-400 p-2 text-5xl">"</span>Lorem ipsum dolor sit amet consectetur adipisicing elit.<span className="text-green-400 p-2 text-5xl">"</span>
+            </p>
+          </blockquote>
+      </div>
+  )
+}
+
+export default Question;
\ No newline at end of file
diff --git a/daily-thought-frontend/src/pages/_document.tsx b/daily-thought-frontend/src/pages/_document.tsx
index 54e8bf3e2a29015a45e11cdc279e06b459890d8b..e331bc75c2083a61de84127b6e07b932b6cb5a68 100644
--- a/daily-thought-frontend/src/pages/_document.tsx
+++ b/daily-thought-frontend/src/pages/_document.tsx
@@ -2,9 +2,9 @@ import { Html, Head, Main, NextScript } from 'next/document'
 
 export default function Document() {
   return (
-    <Html lang="en">
+    <Html lang="en" className="h-full bg-white">
       <Head />
-      <body>
+      <body className='h-full'>
         <Main />
         <NextScript />
       </body>
diff --git a/daily-thought-frontend/src/pages/feed.tsx b/daily-thought-frontend/src/pages/feed.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..b81c2388af3df4d125446344c609429464a5f082
--- /dev/null
+++ b/daily-thought-frontend/src/pages/feed.tsx
@@ -0,0 +1,49 @@
+import NavBar from "@/components/navigation/NavBar";
+import AnswerCard from "@/components/post/AnswerCard";
+import Post from "@/components/post/Post";
+import Question from "@/components/question/Question";
+import { useEffect, useState } from "react";
+
+const user = {
+  Name: 'Tom Cook',
+  email: 'tom@example.com',
+  Username: 'TomCook',
+  Avatar:
+    'https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',
+}
+
+const Feed = () => {
+
+
+    
+    return(
+      <>
+        <div className="w-full">
+          <NavBar user={user} />
+        </div>
+        <div className="flex w-full bg-c-pink flex-col items-center py-3 pt-10">
+          <div className="flex-1 max-w-4xl flex items-center flex-col justify-center">
+            <div className={`p-8 bg-c-pink`}>
+              <h1 className="text-4xl font-bold tracking-tight text-c-green text-center">This is my question of the day</h1>
+            </div>
+          </div>
+        </div>
+        
+        <div className="flex-1 max-w-4xl flex items-center flex-col justify-center mx-auto">
+          <div className="rounded-full my-4 w-xl">
+            <div className="flex w-full justify-center flex-col items-center mx-auto p-3 sm:px-6 lg:px-8 max-w-4xl">
+              <Post post={{User: user, Content: "This is my post"}}/>
+              <Post post={{User: user, Content: "This is my post"}}/>
+              <Post post={{User: user, Content: "This is my post"}}/>
+              <Post post={{User: user, Content: "This is my post"}}/>
+            </div>
+          </div>
+        </div>
+          
+      
+
+      </>
+    )
+}
+
+export default Feed;
\ No newline at end of file
diff --git a/daily-thought-frontend/src/pages/index.tsx b/daily-thought-frontend/src/pages/index.tsx
index 9a80770a1f57a36c16c0443898285e43da1a0277..0c2e4d897326188545981418d3810d4238612367 100644
--- a/daily-thought-frontend/src/pages/index.tsx
+++ b/daily-thought-frontend/src/pages/index.tsx
@@ -1,11 +1,20 @@
 import Head from 'next/head'
 import Image from 'next/image'
 import { Inter } from 'next/font/google'
-import Test from './test'
+import NavBar from '@/components/navigation/NavBar'
+import Hero from '@/components/hero/Hero'
 
 
 const inter = Inter({ subsets: ['latin'] })
 
+const user = {
+  Name: 'Tom Cook',
+  email: 'tom@example.com',
+  Username: 'TomCook',
+  Avatar:
+    'https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',
+}
+
 export default function Home() {
   return (
     <>
@@ -15,8 +24,17 @@ export default function Home() {
         <meta name="viewport" content="width=device-width, initial-scale=1" />
         <link rel="icon" href="/favicon.ico" />
       </Head>
-      <main>
-        <Test />
+      <main className='min-h-screen bg-c-pink'>
+        <NavBar user={null}>
+          {user && 
+            <Hero />
+          }
+          {!user &&
+          <div>
+            logged in
+          </div>
+          }
+        </NavBar>
       </main>
     </>
   )
diff --git a/daily-thought-frontend/src/pages/test.tsx b/daily-thought-frontend/src/pages/test.tsx
deleted file mode 100644
index 1c1b9a9496bd63b3c3451b493c204d21324dee7d..0000000000000000000000000000000000000000
--- a/daily-thought-frontend/src/pages/test.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-const Test = () => {
-
-
-
-    
-    return(
-        <div>
-            testX
-        </div>
-    )
-}
-
-export default Test;
\ No newline at end of file
diff --git a/daily-thought-frontend/src/pages/userPost.tsx b/daily-thought-frontend/src/pages/userPost.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..a609924848a84535f0b4931ff128c33f5c2ed696
--- /dev/null
+++ b/daily-thought-frontend/src/pages/userPost.tsx
@@ -0,0 +1,40 @@
+import NavBar from "@/components/navigation/NavBar";
+import AnswerCard from "@/components/post/AnswerCard";
+import Post from "@/components/post/Post";
+
+const user = {
+  Name: 'Tom Cook',
+  email: 'tom@example.com',
+  Username: 'TomCook',
+  Avatar:
+    'https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',
+}
+
+
+const UserPost = () => {
+
+  return (
+    <div className="min-h-screen bg-c-pink">
+    <div className="w-full">
+      <NavBar user={user} />
+    </div>
+    <div className="flex w-full bg-c-pink flex-col items-center py-3 pt-10">
+      <div className="flex-1 max-w-4xl flex items-center flex-col justify-center">
+        <div className="p-8">
+          <h1 className="text-4xl font-bold tracking-tight text-c-green text-center">This is my question of the day</h1>
+        </div>
+        <div className="rounded-full w-xl">
+
+          <div className="flex w-full justify-center flex-col items-center mx-auto p-3 sm:px-6 lg:px-8 max-w-4xl">
+            <AnswerCard post={{User: user, Content: "This is my post"}}/>
+          </div>
+        </div>
+
+       
+      </div>
+    </div>
+  </div>
+  )
+}
+
+export default UserPost;
\ No newline at end of file
diff --git a/daily-thought-frontend/src/styles/AnswerCard.module.css b/daily-thought-frontend/src/styles/AnswerCard.module.css
new file mode 100644
index 0000000000000000000000000000000000000000..88c1c6ed55c416363e059f1e0d93e16e51417c1e
--- /dev/null
+++ b/daily-thought-frontend/src/styles/AnswerCard.module.css
@@ -0,0 +1,18 @@
+.hidden {
+/* From https://css.glass */
+background: rgba(180, 180, 180, 0.18);
+border-radius: 16px;
+box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
+backdrop-filter: blur(20px);
+-webkit-backdrop-filter: blur(8.1px);
+
+  height: 100%;
+  width: 100%;
+  position: absolute;
+  top: 0;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+}
\ No newline at end of file
diff --git a/daily-thought-frontend/src/styles/globals.css b/daily-thought-frontend/src/styles/globals.css
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..bd6213e1dfe6b0a79ce7d8b37d0d2dc70f0250bb 100644
--- a/daily-thought-frontend/src/styles/globals.css
+++ b/daily-thought-frontend/src/styles/globals.css
@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
\ No newline at end of file
diff --git a/daily-thought-frontend/src/types/comment.ts b/daily-thought-frontend/src/types/comment.ts
new file mode 100644
index 0000000000000000000000000000000000000000..b4cd0f7a95518deb6f9dfc191fddac1d7cd1bd30
--- /dev/null
+++ b/daily-thought-frontend/src/types/comment.ts
@@ -0,0 +1,7 @@
+import { User } from "./user"
+
+export type Comment = {
+  Data: string,
+  User: User,
+  Likes: User[]
+}
\ No newline at end of file
diff --git a/daily-thought-frontend/src/types/post.ts b/daily-thought-frontend/src/types/post.ts
new file mode 100644
index 0000000000000000000000000000000000000000..3c32f436f77591cbd3785d9e0ecf07e168f910c6
--- /dev/null
+++ b/daily-thought-frontend/src/types/post.ts
@@ -0,0 +1,8 @@
+import { User } from "./user"
+
+export type Post = {
+  User: User;
+  Content: string;
+  Timestamp: string;
+  Likes: User[];
+}
\ No newline at end of file
diff --git a/daily-thought-frontend/src/types/user.ts b/daily-thought-frontend/src/types/user.ts
new file mode 100644
index 0000000000000000000000000000000000000000..6b94ff10477e5bf00d86e636b0fd06898cb10e39
--- /dev/null
+++ b/daily-thought-frontend/src/types/user.ts
@@ -0,0 +1,5 @@
+export type User = {
+  Name: string;
+  Username: string;
+  Avatar: string;
+}
\ No newline at end of file
diff --git a/daily-thought-frontend/tailwind.config.js b/daily-thought-frontend/tailwind.config.js
new file mode 100644
index 0000000000000000000000000000000000000000..367d7575d504fd3261a7d0874a29e3785e436dc9
--- /dev/null
+++ b/daily-thought-frontend/tailwind.config.js
@@ -0,0 +1,20 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    "./app/**/*.{js,ts,jsx,tsx}",
+    "./pages/**/*.{js,ts,jsx,tsx}",
+    "./components/**/*.{js,ts,jsx,tsx}",
+ 
+    // Or if using `src` directory:
+    "./src/**/*.{js,ts,jsx,tsx}",
+  ],
+  theme: {
+    extend: {
+      colors: {
+        'c-green': '#2bff9c',
+        'c-pink': '#ff0082'
+      }
+    },
+  },
+  plugins: [],
+}
diff --git a/docker-compose.yml b/docker-compose.yml
new file mode 100644
index 0000000000000000000000000000000000000000..d354d3cdf5120eb132636b78f2a868f2489dbba6
--- /dev/null
+++ b/docker-compose.yml
@@ -0,0 +1,18 @@
+version: "3.9"
+services: 
+  feed-service:
+    build: 
+      context: './backend-services/feed-service'
+      dockerfile: Dockerfile
+    restart: unless-stopped
+    ports: 
+     - "9001:9000"
+    environment:
+     - MONGO_URI=mongodb://feed-mongo:27017/
+
+  mongo:
+      image: mongo
+      container_name: feed-mongo
+      ports:
+       - "27017:27017"
+     
\ No newline at end of file