diff --git a/docs/2021-2022-summer/images/about-us-cfc.png b/docs/2021-2022-summer/images/about-us-cfc.png
new file mode 100644
index 0000000..0f2c9a0
Binary files /dev/null and b/docs/2021-2022-summer/images/about-us-cfc.png differ
diff --git a/docs/2021-2022-summer/images/codebase-jigsaw-assets.png b/docs/2021-2022-summer/images/codebase-jigsaw-assets.png
new file mode 100644
index 0000000..29bfbc5
Binary files /dev/null and b/docs/2021-2022-summer/images/codebase-jigsaw-assets.png differ
diff --git a/docs/2021-2022-summer/images/codebase-jigsaw-components.png b/docs/2021-2022-summer/images/codebase-jigsaw-components.png
new file mode 100644
index 0000000..4538b8b
Binary files /dev/null and b/docs/2021-2022-summer/images/codebase-jigsaw-components.png differ
diff --git a/docs/2021-2022-summer/images/codebase-jigsaw-helpers.png b/docs/2021-2022-summer/images/codebase-jigsaw-helpers.png
new file mode 100644
index 0000000..ca3505b
Binary files /dev/null and b/docs/2021-2022-summer/images/codebase-jigsaw-helpers.png differ
diff --git a/docs/2021-2022-summer/images/codebase-jigsaw-orm.png b/docs/2021-2022-summer/images/codebase-jigsaw-orm.png
new file mode 100644
index 0000000..a59638b
Binary files /dev/null and b/docs/2021-2022-summer/images/codebase-jigsaw-orm.png differ
diff --git a/docs/2021-2022-summer/images/codebase-jigsaw-pages.png b/docs/2021-2022-summer/images/codebase-jigsaw-pages.png
new file mode 100644
index 0000000..26b5073
Binary files /dev/null and b/docs/2021-2022-summer/images/codebase-jigsaw-pages.png differ
diff --git a/docs/2021-2022-summer/images/codebase-jigsaw-routing.png b/docs/2021-2022-summer/images/codebase-jigsaw-routing.png
new file mode 100644
index 0000000..8102f5e
Binary files /dev/null and b/docs/2021-2022-summer/images/codebase-jigsaw-routing.png differ
diff --git a/docs/2021-2022-summer/images/codebase-jigsaw-tests.png b/docs/2021-2022-summer/images/codebase-jigsaw-tests.png
new file mode 100644
index 0000000..70b3ea4
Binary files /dev/null and b/docs/2021-2022-summer/images/codebase-jigsaw-tests.png differ
diff --git a/docs/2021-2022-summer/images/codebase-jigsaw-views.png b/docs/2021-2022-summer/images/codebase-jigsaw-views.png
new file mode 100644
index 0000000..4e5940b
Binary files /dev/null and b/docs/2021-2022-summer/images/codebase-jigsaw-views.png differ
diff --git a/docs/2021-2022-summer/images/role-oriented-file-structure.png b/docs/2021-2022-summer/images/role-oriented-file-structure.png
new file mode 100644
index 0000000..b736018
Binary files /dev/null and b/docs/2021-2022-summer/images/role-oriented-file-structure.png differ
diff --git a/docs/2021-2022-summer/images/stonks.png b/docs/2021-2022-summer/images/stonks.png
new file mode 100644
index 0000000..3953735
Binary files /dev/null and b/docs/2021-2022-summer/images/stonks.png differ
diff --git a/docs/2021-2022-summer/images/subject-oriented-file-structure.png b/docs/2021-2022-summer/images/subject-oriented-file-structure.png
new file mode 100644
index 0000000..023e559
Binary files /dev/null and b/docs/2021-2022-summer/images/subject-oriented-file-structure.png differ
diff --git a/docs/2021-2022-summer/images/wais-codebase.png b/docs/2021-2022-summer/images/wais-codebase.png
new file mode 100644
index 0000000..7852db7
Binary files /dev/null and b/docs/2021-2022-summer/images/wais-codebase.png differ
diff --git a/docs/2021-2022-summer/typical-codebase-structure.md b/docs/2021-2022-summer/typical-codebase-structure.md
new file mode 100644
index 0000000..1e94b77
--- /dev/null
+++ b/docs/2021-2022-summer/typical-codebase-structure.md
@@ -0,0 +1,104 @@
+# Typical Codebase Structure
+*Codebase Jigsaw: How it all fits together!*
+
+???+ info 
+    This presentation is only intended to be a brief overview of the typical codebase structure
+
+    If you want more information about anything mentioned feel free to reach out to CFC committee and project helpers!
+
+## Overview and Importance
+
+- Most codebase will follow almost the same pattern (if they change, it will only change with little quirks)
+- Structure helps every software engineer understand codebase and where to put it certain codes 
+(better code readability = better collaboration = better profit!)
+
+???+ info "Profit"
+    ![stonks](./images/stonks.png)
+
+## Frontend
+Example: [About Us - Coders for Causes Website](https://codersforcauses.org/about)
+
+![website](./images/about-us-cfc.png)
+
+### Different Folders and Purpose
+
+#### Components
+Components are individual parts/pieces of user interfaces
+
+![components](./images/codebase-jigsaw-components.png)
+
+#### Pages
+Pages are the direct components that are related specific to a route or URL
+
+![pages](./images/codebase-jigsaw-pages.png)
+
+#### Public / Assets
+Assets are usually elements that are referenced E.g. Images, Videos
+
+![assets](./images/codebase-jigsaw-assets.png)
+
+#### Utilities / Helpers
+Pieces of code that are used as utilities or helpers to other codes
+
+![helpers](./images/codebase-jigsaw-helpers.png)
+
+#### Tests
+- Scripts that tests that code works
+- Usually E2E frontend
+
+![tests](./images/codebase-jigsaw-tests.png)
+
+### Comparison with Two Codebases
+Slight difference, look at software documentation or ask other engineers
+
+![codebases](./images/wais-codebase.png)
+
+
+## Backend
+
+???+ note "Context - Role and Subject"
+    In these example, when I mean "role", I mean the general role of file. "subject" means the feature or group functionality
+
+### Method of Organisation
+
+#### Subject-Oriented Driven Structure
+As it can be seen here, both **different folders** will have the **same filenames based on its role**. App grows, those files can itself become folders as well.
+
+Example: [erdem/DRF-TDD-example: An example Django REST framework project for test driven development. (github.com)](https://github.com/erdem/DRF-TDD-example)
+
+
+![subject-oriented-file-structure](./images/subject-oriented-file-structure.png)
+
+#### Role-Oriented Driven Structure
+As it can be seen here, both **both different folders** will have the same **filenames based on its subject**
+
+Example: [our-lab-training/olt-backend: Our Lab Training - Feathers Backend (github.com)](https://github.com/our-lab-training/olt-backend)
+
+![role-oriented-file-structure](./images/role-oriented-file-structure.png)
+
+
+### Different Folders and Purpose
+
+#### Models / Database Connection
+Object-Relational Model (ORM). Links the database into your app into objects
+
+![orm](./images/codebase-jigsaw-orm.png)
+
+#### Routing
+Determines the rules for the URL pattern 
+
+![routing](./images/codebase-jigsaw-routing.png)
+
+#### Views
+- In REST API, Views are your main “view” of the API
+
+![views](./images/codebase-jigsaw-views.png)
+
+#### Tests
+- Contains unit testing (+ possibly e2e testing)
+- Most common candidate for transitioning from file to a folder containing more files
+
+## Other Resources
+- [Writing your first Django app, part 1 | Django documentation | Django (djangoproject.com)](https://docs.djangoproject.com/en/3.2/intro/tutorial01/)
+- [File Structure – React (reactjs.org)](https://reactjs.org/docs/faq-structure.html)
+- [Best practice for Django project working directory structure - Stack Overflow](https://stackoverflow.com/questions/22841764/best-practice-for-django-project-working-directory-structure)
diff --git a/mkdocs.yml b/mkdocs.yml
index 58ea1ae..e1650fe 100644
--- a/mkdocs.yml
+++ b/mkdocs.yml
@@ -147,5 +147,6 @@ nav:
   - Introduction to Backend Development with Django: 2021-2022-summer/introduction-to-backend-development-with-django.md
   - MVC-MVMM Architecture and Communications: 2021-2022-summer/mvc-mvmm-architecture-and-communications.md
   - Package Managers: 2021-2022-summer/package-managers.md
+  - Typical Codebase Structure: 2021-2022-summer/typical-codebase-structure.md
 - 2021 Winter:
   - Overview: 2021-winter/index.md
\ No newline at end of file