diff --git a/flex/flex-layout/README.md b/flex/flex-layout/README.md
new file mode 100644
index 0000000..bc35ba2
--- /dev/null
+++ b/flex/flex-layout/README.md
@@ -0,0 +1,21 @@
+# An entire page!
+
+Flexbox is useful for laying out entire pages as well as the smaller components we've already been working with. For this exercise, we're leaving you with a little more work to do, with some things you may not have encountered yet. It's perfectly acceptable to google things you're unsure of!
+
+### Hints
+- you may want to search something like `CSS remove list bullets`. We've done this for you in previous examples, but not here. Yay learning.
+- We've added `height: 100vh` to the `body`.. this makes the body exactly the same height as the viewport. To stick the footer to the bottom you will need to use flex and change the direction to column.
+
+## Desired Outcome
+
+
+### Self Check
+
+- Header is at the top of the page, footer is at the bottom and they stay in place if you resize your screen.
+- Header and footer have padding.
+- Links in header and footer are pushed to either side.
+- There is space between the links in the header and footer.
+- Footer has a light gray background (#eeeeee).
+- Logo, input and buttons are centered in the screen.
+- Buttons have an appropriate amount of padding.
+- There is space between the logo, input and buttons.
diff --git a/flex/flex-layout/desired-outcome.png b/flex/flex-layout/desired-outcome.png
new file mode 100644
index 0000000..4d7fd35
Binary files /dev/null and b/flex/flex-layout/desired-outcome.png differ
diff --git a/flex/flex-layout/index.html b/flex/flex-layout/index.html
new file mode 100644
index 0000000..3ee5e02
--- /dev/null
+++ b/flex/flex-layout/index.html
@@ -0,0 +1,42 @@
+
+
+
+
+
+
+ LAYOUT
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/flex/flex-layout/logo.png b/flex/flex-layout/logo.png
new file mode 100644
index 0000000..d14f8a5
Binary files /dev/null and b/flex/flex-layout/logo.png differ
diff --git a/flex/flex-layout/solution.css b/flex/flex-layout/solution.css
new file mode 100644
index 0000000..71f6b7e
--- /dev/null
+++ b/flex/flex-layout/solution.css
@@ -0,0 +1,64 @@
+@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
+
+body {
+ height: 100vh;
+ margin: 0;
+ overflow: hidden;
+ font-family: Roboto, sans-serif;
+
+ display: flex;
+ flex-direction: column;
+}
+
+img {
+ width: 600px;
+}
+
+button {
+ font-family: Roboto, sans-serif;
+ border: none;
+ border-radius: 8px;
+ background: #eee;
+
+ padding: 8px 16px;
+}
+
+input {
+ border: 1px solid #ddd;
+ border-radius: 16px;
+ padding: 8px 24px;
+ width: 400px;
+ margin-bottom: 16px;
+}
+
+.content {
+ flex: 1;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ flex-direction: column;
+}
+
+a {
+ color: #666;
+ text-decoration: none;
+}
+
+.header,
+.footer {
+ display: flex;
+ justify-content: space-between;
+ padding: 16px;
+}
+
+.footer {
+ background: #eee;
+}
+
+ul {
+ display: flex;
+ list-style: none;
+ margin: 0;
+ padding: 0;
+ gap: 16px
+}
\ No newline at end of file
diff --git a/flex/flex-layout/style.css b/flex/flex-layout/style.css
new file mode 100644
index 0000000..743aa09
--- /dev/null
+++ b/flex/flex-layout/style.css
@@ -0,0 +1,27 @@
+@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
+
+body {
+ height: 100vh;
+ margin: 0;
+ overflow: hidden;
+ font-family: Roboto, sans-serif;
+}
+
+img {
+ width: 600px;
+}
+
+button {
+ font-family: Roboto, sans-serif;
+ border: none;
+ border-radius: 8px;
+ background: #eee;
+}
+
+input {
+ border: 1px solid #ddd;
+ border-radius: 16px;
+ padding: 8px 24px;
+ width: 400px;
+ margin-bottom: 16px;
+}
diff --git a/flex/flex-modal/README.md b/flex/flex-modal/README.md
new file mode 100644
index 0000000..02b79f6
--- /dev/null
+++ b/flex/flex-modal/README.md
@@ -0,0 +1,18 @@
+# A common 'modal' style
+This one is another very common pattern on the web. The solution to this one is _simple_... but it might not be immediately obvious to you. You'll need to edit the HTML a bit to get everything where it needs to be.
+
+### a hint
+Depending on how to approach this one, you might need to revisit the `flex-shrink` property to keep a flex item from getting smashed.
+
+## Desired outcome
+
+
+
+### Self Check
+
+- The blue icon is aligned to the left.
+- There is equal space on either side of the icon (the gap between the icon and the edge of the card, and the icon and the text is the same).
+- There is padding around the edge of the modal.
+- The header, text, and buttons are aligned with each other.
+- The header is bold and a slightly larger text-size than the text.
+- The close button is vertically aligned with the header, and aligned in the top-right of the card.
\ No newline at end of file
diff --git a/flex/flex-modal/desired-outcome.png b/flex/flex-modal/desired-outcome.png
new file mode 100644
index 0000000..521041c
Binary files /dev/null and b/flex/flex-modal/desired-outcome.png differ
diff --git a/flex/flex-modal/index.html b/flex/flex-modal/index.html
new file mode 100644
index 0000000..48a7b40
--- /dev/null
+++ b/flex/flex-modal/index.html
@@ -0,0 +1,20 @@
+
+
+
+
+
+
+
+ Modal
+
+
+
+
!
+
Are you sure you want to do that?
+
✖
+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur excepturi id soluta, numquam minima rerum doloremque eveniet aspernatur beatae commodi. Cupiditate recusandae ad repellendus quidem consectetur sequi amet aspernatur cumque!
+