diff --git a/react-frontend/package-lock.json b/react-frontend/package-lock.json
index fc2f16a..5245980 100644
--- a/react-frontend/package-lock.json
+++ b/react-frontend/package-lock.json
@@ -3402,13 +3402,13 @@
       "integrity": "sha512-2/U3GXA6YiPYQDLGwtGlnNgKYBSwCFIHf8Y9LUY5VATHdtbLlU0Y1R3QoBnT0aB4qv/BEiVVsj7LJXoQCgJ2vA=="
     },
     "node_modules/@sanity/client": {
-      "version": "6.10.0",
-      "resolved": "https://registry.npmjs.org/@sanity/client/-/client-6.10.0.tgz",
-      "integrity": "sha512-TavtxGB6NWjro2BTGXSkzXNMKFZbS2il1ItV3IdRvO0luLqS31eIz37+5X4CmCC8hGFe6fDoCjnH/iJ81vKM7g==",
+      "version": "6.12.4",
+      "resolved": "https://registry.npmjs.org/@sanity/client/-/client-6.12.4.tgz",
+      "integrity": "sha512-eDBnKwKdFIiMeRZ5xPaKUOs+gsw6P4Bq+Bj7cZ9xuaLXMTsOSlB5h9TsPW5vAYRMbm4coVYUvhqm9TMwSi0F2Q==",
       "dependencies": {
         "@sanity/eventsource": "^5.0.0",
         "@vercel/stega": "0.1.0",
-        "get-it": "^8.4.4",
+        "get-it": "^8.4.6",
         "rxjs": "^7.0.0"
       },
       "engines": {
@@ -8285,9 +8285,9 @@
       "integrity": "sha512-36yxDn5H7OFZQla0/jFJmbIKTdZAQHngCedGxiMmpNfEZM0sdEeT+WczLQrjK6D7o2aiyLYDnkw0R3JK0Qv1RQ=="
     },
     "node_modules/follow-redirects": {
-      "version": "1.15.3",
-      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.3.tgz",
-      "integrity": "sha512-1VzOtuEM8pC9SFU1E+8KfTjZyMztRsgEfwQl44z8A25uy13jSzTj6dyK2Df52iV0vgHCfBwLhDWevLn95w5v6Q==",
+      "version": "1.15.5",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.5.tgz",
+      "integrity": "sha512-vSFWUON1B+yAw1VN4xMfxgn5fTUiaOzAJCKBwIIgT/+7CuGy9+r+5gITvP62j3RmaD5Ph65UaERdOSRGUzZtgw==",
       "funding": [
         {
           "type": "individual",
@@ -8672,13 +8672,13 @@
       }
     },
     "node_modules/get-it": {
-      "version": "8.4.4",
-      "resolved": "https://registry.npmjs.org/get-it/-/get-it-8.4.4.tgz",
-      "integrity": "sha512-Pu3pnJfnYuLEhwJgMlFqk19ugvtazzTxh7rg8wATaBL4c5Fy4ahM5B+bGdluiNSNYYK89F5vSa+N3sTa/qqtlg==",
+      "version": "8.4.6",
+      "resolved": "https://registry.npmjs.org/get-it/-/get-it-8.4.6.tgz",
+      "integrity": "sha512-omefjdbyRb2rRt0tnrZlbeWx9oZJm66o88K8JlYn13xELn+0+d6mJZOQHrJAdC3vxeJ4t/NHa4wh7Wlh+nvEJA==",
       "dependencies": {
         "debug": "^4.3.4",
         "decompress-response": "^7.0.0",
-        "follow-redirects": "^1.15.2",
+        "follow-redirects": "^1.15.4",
         "into-stream": "^6.0.0",
         "is-plain-object": "^5.0.0",
         "is-retry-allowed": "^2.2.0",
diff --git a/react-frontend/src/APIs/ExternalResource/index.ts b/react-frontend/src/APIs/ExternalResource/index.ts
deleted file mode 100644
index 7e4a32b..0000000
--- a/react-frontend/src/APIs/ExternalResource/index.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-const getGithubImageURL = (username: string) => `https://avatars.githubusercontent.com/${username}`;
-
-const getResumeURL = () => `https://drive.google.com/drive/folders/1yJmOWWaRQpM32haB8CeXCOzK0_WC6o59`;
-
-export { getGithubImageURL, getResumeURL };
diff --git a/react-frontend/src/APIs/Sanity/about.ts b/react-frontend/src/APIs/Sanity/about.ts
new file mode 100644
index 0000000..a070d6f
--- /dev/null
+++ b/react-frontend/src/APIs/Sanity/about.ts
@@ -0,0 +1,20 @@
+import { SanityAboutPage } from '../../Types';
+import sanityClient from './client';
+
+const getAboutPage = async () => {
+    const query = `*[_type == "portfolio"][0].pages[_type == "aboutPage"][0] {
+        salutation,
+        personImage,
+        seeking,
+        personName,
+        description,
+        resume,
+        position
+    }`;
+    const result: SanityAboutPage = await sanityClient.fetch(query);
+    return result;
+};
+
+export {
+    getAboutPage,
+}
\ No newline at end of file
diff --git a/react-frontend/src/APIs/Sanity/certificates.ts b/react-frontend/src/APIs/Sanity/certificates.ts
deleted file mode 100644
index b8c5c02..0000000
--- a/react-frontend/src/APIs/Sanity/certificates.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import { SanityCertificate } from '../../Types';
-import sanityClient from './client';
-
-const getCertificates = async () => {
-    const query = `*[_type == "certificates"]{
-        title,
-        subTitle,
-        rank,
-        description,
-        date,
-        link,
-    }`;
-    const result: SanityCertificate[] = await sanityClient.fetch(query);
-    return result;
-};
-
-export {
-    getCertificates,
-}
\ No newline at end of file
diff --git a/react-frontend/src/APIs/Sanity/client.ts b/react-frontend/src/APIs/Sanity/client.ts
index 9a663a4..b5896f8 100644
--- a/react-frontend/src/APIs/Sanity/client.ts
+++ b/react-frontend/src/APIs/Sanity/client.ts
@@ -3,7 +3,8 @@ import { createClient } from '@sanity/client'
 const sanityClient = createClient({
     projectId: 'h48br789',
     dataset: 'production',
-    useCdn: true
+    useCdn: true,
+    apiVersion: '2022-03-07',
 })
 
 export default sanityClient;
\ No newline at end of file
diff --git a/react-frontend/src/APIs/Sanity/contacts.ts b/react-frontend/src/APIs/Sanity/contacts.ts
index ed32fbe..9e78951 100644
--- a/react-frontend/src/APIs/Sanity/contacts.ts
+++ b/react-frontend/src/APIs/Sanity/contacts.ts
@@ -1,16 +1,19 @@
-import { SanityContact } from '../../Types';
+import { SanityContactsPage } from '../../Types';
 import sanityClient from './client';
 
-const getContacts = async () => {
-    const query = `*[_type == "contacts"]{
-        "imgSrc": icon.asset->url,
-        link,
-        name
+const getContactsPage = async () => {
+    const query = `*[_type == "portfolio"][0].pages[_type == "contactsPage"][0] {
+        title,
+        "contacts": contacts[] -> {
+            "imgSrc": icon.asset->url,
+            link,
+            name
+        }
     }`;
-    const result: SanityContact[] = await sanityClient.fetch(query);
+    const result: SanityContactsPage = await sanityClient.fetch(query);
     return result;
 };
 
 export {
-    getContacts,
+    getContactsPage,
 }
\ No newline at end of file
diff --git a/react-frontend/src/APIs/Sanity/education.ts b/react-frontend/src/APIs/Sanity/education.ts
new file mode 100644
index 0000000..797584d
--- /dev/null
+++ b/react-frontend/src/APIs/Sanity/education.ts
@@ -0,0 +1,25 @@
+import { SanityEducationPage } from '../../Types';
+import sanityClient from './client';
+
+const getEducationPage = async () => {
+    const query = `*[_type == "portfolio"][0].pages[_type == "educationPage"][0] {
+        title,
+        education {
+            name,
+            description,
+            location,
+            date,
+            courses[] -> {
+                name,
+                description,
+                "technologies": technologies[]->name
+            }
+        }
+    }`;
+    const result: SanityEducationPage = await sanityClient.fetch(query);
+    return result;
+};
+
+export {
+    getEducationPage,
+}
\ No newline at end of file
diff --git a/react-frontend/src/APIs/Sanity/educationCourses.ts b/react-frontend/src/APIs/Sanity/educationCourses.ts
deleted file mode 100644
index be09a46..0000000
--- a/react-frontend/src/APIs/Sanity/educationCourses.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import { SanityEducationCourse } from '../../Types';
-import sanityClient from './client';
-
-const getEducationCourses = async () => {
-    const query = `*[_type == "collegeCourses"]{
-        name,
-        rank,
-        description,
-        "technologies": technologies[]->name
-    }`;
-    const result: SanityEducationCourse[] = await sanityClient.fetch(query);
-    return result;
-};
-
-export {
-    getEducationCourses,
-}
\ No newline at end of file
diff --git a/react-frontend/src/APIs/Sanity/experience.ts b/react-frontend/src/APIs/Sanity/experience.ts
new file mode 100644
index 0000000..e6c9c20
--- /dev/null
+++ b/react-frontend/src/APIs/Sanity/experience.ts
@@ -0,0 +1,34 @@
+import { SanityExperiencePage } from '../../Types';
+import sanityClient from './client';
+
+const getExperiencePage = async () => {
+    const query = `*[_type == "portfolio"][0].pages[_type == "experiencePage"][0] {
+        internshipsSection {
+            title,
+            internships[] -> {
+                title,
+                subTitle,
+                date,
+                link,
+                description,
+                "technologies": technologies[]->name
+            }
+        },
+        certificatesSection {
+            title,
+            certificates[] -> {
+                title,
+                subTitle,
+                description,
+                date,
+                link,
+            }
+        }
+    }`;
+    const result: SanityExperiencePage = await sanityClient.fetch(query);
+    return result;
+};
+
+export {
+    getExperiencePage,
+}
\ No newline at end of file
diff --git a/react-frontend/src/APIs/Sanity/index.ts b/react-frontend/src/APIs/Sanity/index.ts
index 7759ad4..4b1ad10 100644
--- a/react-frontend/src/APIs/Sanity/index.ts
+++ b/react-frontend/src/APIs/Sanity/index.ts
@@ -1,6 +1,7 @@
-export { getContacts } from './contacts';
-export { getCertificates } from './certificates';
-export { getEducationCourses } from './educationCourses';
-export { getInternships } from './internships';
-export { getProjects } from './projects';
-export { getSkills } from './skills';
\ No newline at end of file
+export { getContactsPage } from './contacts';
+export { getEducationPage } from './education';
+export { getProjectsPage } from './projects';
+export { getSkillsPage } from './skills';
+export { getAboutPage } from './about';
+export { getExperiencePage } from './experience';
+export { getNavbarData } from './navbar';
\ No newline at end of file
diff --git a/react-frontend/src/APIs/Sanity/internships.ts b/react-frontend/src/APIs/Sanity/internships.ts
deleted file mode 100644
index 6561ad9..0000000
--- a/react-frontend/src/APIs/Sanity/internships.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import { SanityInternship } from '../../Types';
-import sanityClient from './client';
-
-const getInternships = async () => {
-    const query = `*[_type == "internships"]{
-        title,
-        subTitle,
-        rank,
-        date,
-        link,
-        description,
-        "technologies": technologies[]->name
-    }`;
-    const result: SanityInternship[] = await sanityClient.fetch(query);
-    return result;
-};
-
-export {
-    getInternships,
-}
\ No newline at end of file
diff --git a/react-frontend/src/APIs/Sanity/navbar.ts b/react-frontend/src/APIs/Sanity/navbar.ts
new file mode 100644
index 0000000..7d652e3
--- /dev/null
+++ b/react-frontend/src/APIs/Sanity/navbar.ts
@@ -0,0 +1,12 @@
+import { SanityNavbarData } from '../../Types';
+import sanityClient from './client';
+
+const getNavbarData = async () => {
+    const query = `*[_type == "portfolio"][0].navbar`;
+    const result: SanityNavbarData = await sanityClient.fetch(query);
+    return result;
+};
+
+export {
+    getNavbarData,
+}
\ No newline at end of file
diff --git a/react-frontend/src/APIs/Sanity/projects.ts b/react-frontend/src/APIs/Sanity/projects.ts
index f365ca8..8d422c1 100644
--- a/react-frontend/src/APIs/Sanity/projects.ts
+++ b/react-frontend/src/APIs/Sanity/projects.ts
@@ -1,19 +1,21 @@
-import { SanityProject } from '../../Types';
+import { SanityProjectsPage } from '../../Types';
 import sanityClient from './client';
 
-const getProjects = async () => {
-    const query = `*[_type == "projects"]{
-        name,
-        rank,
-        links,
-        description,
-        "imgSrc": image.asset->url,
-        "technologies": technologies[]->name
+const getProjectsPage = async () => {
+    const query = `*[_type == "portfolio"][0].pages[_type == "projectsPage"][0] {
+        title,
+        "projects": projects[] -> {
+            name,
+            links,
+            description,
+            "imgSrc": image.asset->url,
+            "technologies": technologies[]->name
+        }
     }`;
-    const result: SanityProject[] = await sanityClient.fetch(query);
+    const result: SanityProjectsPage = await sanityClient.fetch(query);
     return result;
 };
 
 export {
-    getProjects,
+    getProjectsPage,
 }
\ No newline at end of file
diff --git a/react-frontend/src/APIs/Sanity/skills.ts b/react-frontend/src/APIs/Sanity/skills.ts
index 1316147..92c1380 100644
--- a/react-frontend/src/APIs/Sanity/skills.ts
+++ b/react-frontend/src/APIs/Sanity/skills.ts
@@ -1,16 +1,21 @@
-import { SanitySkill } from '../../Types';
+import { SanitySkillsPage } from '../../Types';
 import sanityClient from './client';
 
-const getSkills = async () => {
-    const query = `*[_type == "skills" && rank >= 0]{
-        "categoryName": category->name,
-        "iconURL": icon.asset->url,
-        name, rank
+const getSkillsPage = async () => {
+    const query = `*[_type == "portfolio"][0].pages[_type == "skillsPage"][0] {
+        title,
+        "categories": categories[] {
+            title,
+            skills[] -> {
+                "iconURL": icon.asset->url,
+                name
+            }
+        }
     }`;
-    const result: SanitySkill[] = await sanityClient.fetch(query);
+    const result: SanitySkillsPage = await sanityClient.fetch(query);
     return result;
 };
 
 export {
-    getSkills,
+    getSkillsPage,
 }
\ No newline at end of file
diff --git a/react-frontend/src/APIs/index.ts b/react-frontend/src/APIs/index.ts
index 13b939e..ba50ca8 100644
--- a/react-frontend/src/APIs/index.ts
+++ b/react-frontend/src/APIs/index.ts
@@ -1,10 +1,9 @@
-export { getGithubImageURL, getResumeURL } from './ExternalResource';
-
 export {
-    getSkills,
-    getEducationCourses,
-    getInternships,
-    getProjects,
-    getContacts,
-    getCertificates
+    getSkillsPage,
+    getEducationPage,
+    getProjectsPage,
+    getContactsPage,
+    getExperiencePage,
+    getAboutPage,
+    getNavbarData
 } from './Sanity';
\ No newline at end of file
diff --git a/react-frontend/src/Texts/about.ts b/react-frontend/src/Texts/about.ts
deleted file mode 100644
index b3d4907..0000000
--- a/react-frontend/src/Texts/about.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-export const aboutPageContent = {
-    salutation: "As-salamu alaykum!",
-    name: "I'm Shawky Ebrahim",
-    seeking: "I'm looking for an internship in",
-    position: "Software Development",
-    description: `I can be a valuable asset to your team and contribute to your projects with my skills and enthusiasm.
-    Please don't hesitate to check out my resume or reach out from the contacts page.`,
-    resume: "See My Resume",
-}
\ No newline at end of file
diff --git a/react-frontend/src/Texts/contacts.ts b/react-frontend/src/Texts/contacts.ts
deleted file mode 100644
index 3f89e24..0000000
--- a/react-frontend/src/Texts/contacts.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export const contactsPageContent = {
-    highlightedTitle: "Get in Touch",
-    titlePhrase: "How to Reach Me",
-}
\ No newline at end of file
diff --git a/react-frontend/src/Texts/education.ts b/react-frontend/src/Texts/education.ts
deleted file mode 100644
index d2a0efa..0000000
--- a/react-frontend/src/Texts/education.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-export const educationPageContent = {
-    highlightedTitle: "Education",
-    titlePhrase: "As a computer science student",
-    college: {
-        name: "Faculty of Computers and Artificial Intelligence - Cairo University",
-        degree: "Bachelor of Science in Computer Science",
-        gpa: "GPA: 3.74",
-        fullDate: "From 6/2021 to 8/2025",
-        location: "Giza, Egypt",
-    }
-}
\ No newline at end of file
diff --git a/react-frontend/src/Texts/experience.ts b/react-frontend/src/Texts/experience.ts
deleted file mode 100644
index 8500725..0000000
--- a/react-frontend/src/Texts/experience.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-export const experiencePageContent = {
-    internships: {
-        highlightedTitle: "Internships & Training",
-        titlePhrase: "How I Gained Real-World Experience",
-    },
-    certificates: {
-        highlightedTitle: "Certificates",
-        titlePhrase: "How I Demonstrated My Excellence",
-    },
-}
\ No newline at end of file
diff --git a/react-frontend/src/Texts/index.ts b/react-frontend/src/Texts/index.ts
deleted file mode 100644
index 67bbce7..0000000
--- a/react-frontend/src/Texts/index.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-export { aboutPageContent } from "./about";
-
-export { skillsPageContent } from "./skills";
-
-export { educationPageContent } from "./education";
-
-export { experiencePageContent } from "./experience";
-
-export { projectsPageContent } from "./projects";
-
-export { contactsPageContent } from "./contacts";
-
-export { navbarContent, pages } from "./navbarContent";
\ No newline at end of file
diff --git a/react-frontend/src/Texts/navbarContent.ts b/react-frontend/src/Texts/navbarContent.ts
deleted file mode 100644
index c989b17..0000000
--- a/react-frontend/src/Texts/navbarContent.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-export const navbarContent = {
-    logoText: "SHAWKY EBRAHIM"
-}
-
-export const pages = ["about", "contact", "home", "projects"];
\ No newline at end of file
diff --git a/react-frontend/src/Texts/projects.ts b/react-frontend/src/Texts/projects.ts
deleted file mode 100644
index 1387051..0000000
--- a/react-frontend/src/Texts/projects.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export const projectsPageContent = {
-    highlightedTitle: "Projects",
-    titlePhrase: "What I Built With My Hands and Mind",
-}
\ No newline at end of file
diff --git a/react-frontend/src/Texts/skills.ts b/react-frontend/src/Texts/skills.ts
deleted file mode 100644
index 8324030..0000000
--- a/react-frontend/src/Texts/skills.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export const skillsPageContent = {
-    highlightedTitle: "Skills & Tools",
-    titlePhrase: "What I Know and Can Do",
-}
\ No newline at end of file
diff --git a/react-frontend/src/Types/index.ts b/react-frontend/src/Types/index.ts
index 0605a2e..7da0486 100644
--- a/react-frontend/src/Types/index.ts
+++ b/react-frontend/src/Types/index.ts
@@ -1,21 +1,12 @@
 export {
-    type SanitySkill,
-    type SanityEducationCourse,
-    type SanityInternship,
-    type SanityProject,
-    type SanityContact,
-    type TechnologyCategory,
-    type SanityCertificate
+    type SanitySkillsPage,
+    type SanityEducationPage,
+    type SanityProjectsPage,
+    type SanityContactsPage,
+    type CommonTitle,
+    type SanityExperiencePage,
+    type SanityAboutPage,
+    type SanityNavbarData
 } from './sanity';
 
-export { type Theme, type Links } from './contexts';
-
-export { type TechnologySkill } from './pages/skills';
-
-export { type Course } from './pages/education';
-
-export { type Internship, type Certificate } from './pages/experience';
-
-export { type Project } from './pages/projects';
-
-export { type Contact } from './pages/contacts';
\ No newline at end of file
+export { type Theme, type Links } from './contexts';
\ No newline at end of file
diff --git a/react-frontend/src/Types/pages/contacts.ts b/react-frontend/src/Types/pages/contacts.ts
deleted file mode 100644
index 78ab25c..0000000
--- a/react-frontend/src/Types/pages/contacts.ts
+++ /dev/null
@@ -1 +0,0 @@
-export type { SanityContact as Contact } from "../sanity"
\ No newline at end of file
diff --git a/react-frontend/src/Types/pages/education.ts b/react-frontend/src/Types/pages/education.ts
deleted file mode 100644
index 26753b8..0000000
--- a/react-frontend/src/Types/pages/education.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import { SanityEducationCourse } from "../sanity";
-
-export type Course = Omit<SanityEducationCourse, "rank">;
\ No newline at end of file
diff --git a/react-frontend/src/Types/pages/experience.ts b/react-frontend/src/Types/pages/experience.ts
deleted file mode 100644
index b77970b..0000000
--- a/react-frontend/src/Types/pages/experience.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import { SanityInternship, SanityCertificate } from "../sanity";
-
-export type Internship = Omit<SanityInternship, "rank">;
-
-export type Certificate = Omit<SanityCertificate, "rank">;
\ No newline at end of file
diff --git a/react-frontend/src/Types/pages/projects.ts b/react-frontend/src/Types/pages/projects.ts
deleted file mode 100644
index 4e83ce8..0000000
--- a/react-frontend/src/Types/pages/projects.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import { SanityProject } from "../sanity";
-
-export type Project = Omit<SanityProject, 'rank'>;
\ No newline at end of file
diff --git a/react-frontend/src/Types/pages/skills.ts b/react-frontend/src/Types/pages/skills.ts
deleted file mode 100644
index cbc0d50..0000000
--- a/react-frontend/src/Types/pages/skills.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import { SanitySkill } from "../sanity";
-
-export type TechnologySkill = Omit<SanitySkill, "categoryName" | "rank">;
diff --git a/react-frontend/src/Types/sanity.ts b/react-frontend/src/Types/sanity.ts
deleted file mode 100644
index 1c47c3c..0000000
--- a/react-frontend/src/Types/sanity.ts
+++ /dev/null
@@ -1,55 +0,0 @@
-export type TechnologyCategory = "General" | "Frontend" | "Backend" | "Databases" | "Tools";
-
-export type SanitySkill = {
-    name: string;
-    rank: number;
-    categoryName: TechnologyCategory;
-    iconURL: string;
-}
-
-export type SanityEducationCourse = {
-    name: string;
-    rank: number;
-    description: string;
-    technologies: string[];
-}
-
-export type SanityInternship = {
-    title: string;
-    subTitle: string;
-    rank: number;
-    date: {
-        from: string;
-        to: string;
-    }
-    link: string;
-    description: string;
-    technologies: string[];
-}
-
-export type SanityProject = {
-    name: string; // title
-    rank: number;
-    links: {
-        demoLink: string;
-        projectLink: string;
-    }
-    description: string;
-    imgSrc: string;
-    technologies: string[];
-}
-
-export type SanityContact = {
-    imgSrc: string;
-    link: string;
-    name: string;
-}
-
-export type SanityCertificate = {
-    title : string;
-    subTitle : string;
-    rank : number;
-    description? : string;
-    date : string;
-    link : string;
-}
diff --git a/react-frontend/src/Types/sanity/aboutPage.ts b/react-frontend/src/Types/sanity/aboutPage.ts
new file mode 100644
index 0000000..0295b03
--- /dev/null
+++ b/react-frontend/src/Types/sanity/aboutPage.ts
@@ -0,0 +1,14 @@
+type Resume = {
+    link: string;
+    text: string;
+}
+
+export type SanityAboutPage = {
+    personImage: string;
+    seeking: string;
+    personName: string;
+    description: string;
+    resume: Resume;
+    position: string;
+    salutation: string;
+}
\ No newline at end of file
diff --git a/react-frontend/src/Types/sanity/common.ts b/react-frontend/src/Types/sanity/common.ts
new file mode 100644
index 0000000..d4d6dd0
--- /dev/null
+++ b/react-frontend/src/Types/sanity/common.ts
@@ -0,0 +1,6 @@
+export type CommonTitle = {
+    title: {
+        highlightedText: string;
+        subText: string;
+    }
+}
\ No newline at end of file
diff --git a/react-frontend/src/Types/sanity/contactsPage.ts b/react-frontend/src/Types/sanity/contactsPage.ts
new file mode 100644
index 0000000..d7bc26d
--- /dev/null
+++ b/react-frontend/src/Types/sanity/contactsPage.ts
@@ -0,0 +1,11 @@
+import { CommonTitle } from "./common";
+
+type Contact = {
+    imgSrc: string;
+    link: string;
+    name: string;
+}
+
+export type SanityContactsPage = CommonTitle & {
+    contacts: Contact[];
+}
\ No newline at end of file
diff --git a/react-frontend/src/Types/sanity/educationPage.ts b/react-frontend/src/Types/sanity/educationPage.ts
new file mode 100644
index 0000000..079d65f
--- /dev/null
+++ b/react-frontend/src/Types/sanity/educationPage.ts
@@ -0,0 +1,22 @@
+import { CommonTitle } from "./common";
+
+type Date = {
+    start: string;
+    end: string;
+}
+
+type Course = {
+    name: string;
+    description: string;
+    technologies: string[];
+}
+
+export type SanityEducationPage = CommonTitle & {
+    education: {
+        name: string;
+        description: string;
+        location: string;
+        date: Date;
+        courses: Course[];
+    }
+}
\ No newline at end of file
diff --git a/react-frontend/src/Types/sanity/experiencePage.ts b/react-frontend/src/Types/sanity/experiencePage.ts
new file mode 100644
index 0000000..5b969e8
--- /dev/null
+++ b/react-frontend/src/Types/sanity/experiencePage.ts
@@ -0,0 +1,36 @@
+import { CommonTitle } from "./common";
+
+type Date = {
+    from: string;
+    to: string;
+}
+
+type Internship = {
+    title: string;
+    subTitle: string;
+    date: Date,
+    link: string;
+    description: string;
+    technologies: string[];
+}
+
+type Certificate = {
+    title: string;
+    subTitle: string;
+    description: string;
+    date: string;
+    link: string;
+}
+
+type SanityInternshipsSection = CommonTitle & {
+    internships: Internship[];
+}
+
+type SanityCertificatesSection = CommonTitle & {
+    certificates: Certificate[];
+}
+
+export type SanityExperiencePage = {
+    certificatesSection: SanityCertificatesSection;
+    internshipsSection: SanityInternshipsSection;
+}
\ No newline at end of file
diff --git a/react-frontend/src/Types/sanity/index.ts b/react-frontend/src/Types/sanity/index.ts
new file mode 100644
index 0000000..c58aadd
--- /dev/null
+++ b/react-frontend/src/Types/sanity/index.ts
@@ -0,0 +1,8 @@
+export { type CommonTitle } from './common';
+export { type SanityAboutPage } from './aboutPage';
+export { type SanityContactsPage } from './contactsPage';
+export { type SanityEducationPage } from './educationPage';
+export { type SanityExperiencePage } from './experiencePage';
+export { type SanityProjectsPage } from './projectsPage';
+export { type SanitySkillsPage } from './skillsPage';
+export { type SanityNavbarData } from './navbarData';
\ No newline at end of file
diff --git a/react-frontend/src/Types/sanity/navbarData.ts b/react-frontend/src/Types/sanity/navbarData.ts
new file mode 100644
index 0000000..87f9fd4
--- /dev/null
+++ b/react-frontend/src/Types/sanity/navbarData.ts
@@ -0,0 +1,3 @@
+export type SanityNavbarData = {
+    logo: string;
+}
\ No newline at end of file
diff --git a/react-frontend/src/Types/sanity/projectsPage.ts b/react-frontend/src/Types/sanity/projectsPage.ts
new file mode 100644
index 0000000..fa27be6
--- /dev/null
+++ b/react-frontend/src/Types/sanity/projectsPage.ts
@@ -0,0 +1,18 @@
+import { CommonTitle } from "./common";
+
+type Links = {
+    demoLink: string;
+    projectLink: string;
+}
+
+type Project = {
+    name: string;
+    links: Links;
+    description: string;
+    imgSrc: string;
+    technologies: string[];
+}
+
+export type SanityProjectsPage = CommonTitle & {
+    projects: Project[];
+}
\ No newline at end of file
diff --git a/react-frontend/src/Types/sanity/skillsPage.ts b/react-frontend/src/Types/sanity/skillsPage.ts
new file mode 100644
index 0000000..4fb637e
--- /dev/null
+++ b/react-frontend/src/Types/sanity/skillsPage.ts
@@ -0,0 +1,15 @@
+import { CommonTitle } from "./common";
+
+type Skill = {
+    name: string;
+    iconURL: string;
+}
+
+type Category = {
+    title: string;
+    skills: Skill[];
+}
+
+export type SanitySkillsPage = CommonTitle & {
+    categories: Category[];
+}
\ No newline at end of file
diff --git a/react-frontend/src/components/Icon/index.tsx b/react-frontend/src/components/Icon/index.tsx
index 268c514..9ce666a 100644
--- a/react-frontend/src/components/Icon/index.tsx
+++ b/react-frontend/src/components/Icon/index.tsx
@@ -33,7 +33,7 @@ const motionProperties = {
 }
 
 export default function Icon({
-    src = "images/placeholder.png",
+    src,
     alt,
     text,
     pointer = false,
@@ -85,7 +85,7 @@ export default function Icon({
             whileTap={motionProperties.whileTap}
             onClick={onClick} >
             <div style={imageFrameStyle}>
-                <img style={imageStyle} src={src} alt={alt} />
+                <img style={imageStyle} src={src ?? "images/placeholder.png"} alt={alt} />
             </div>
             {text && <Text variant={"body"}>{text}</Text>}
         </motion.div>
diff --git a/react-frontend/src/components/Loader/index.tsx b/react-frontend/src/components/Loader/index.tsx
index 890ac15..0ca9d53 100644
--- a/react-frontend/src/components/Loader/index.tsx
+++ b/react-frontend/src/components/Loader/index.tsx
@@ -22,7 +22,6 @@ export default function Loader() {
         display: "flex",
         alignItems: "center",
         justifyContent: "center",
-        width: "100%",
     }), []);
 
     return (
diff --git a/react-frontend/src/components/Navbar/Logo.tsx b/react-frontend/src/components/Navbar/Logo.tsx
index 46c8fbd..6400598 100644
--- a/react-frontend/src/components/Navbar/Logo.tsx
+++ b/react-frontend/src/components/Navbar/Logo.tsx
@@ -2,10 +2,9 @@ import { useCallback } from 'react'
 import { useThemeContext } from '../../contexts/ThemeContext';
 import Text from '../Text'
 import { useNavigationControllerContext } from '../../contexts/NavigationControllerContext';
-import { Links } from '../../Types';
-import { navbarContent } from '../../Texts';
+import { Links, SanityNavbarData } from '../../Types';
 
-export default function Logo() {
+export default function Logo({ logo }: Readonly<Pick<SanityNavbarData, "logo">>) {
     const { theme } = useThemeContext();
     const { setLinks } = useNavigationControllerContext();
     const changeLinksHandler = useCallback(() => {
@@ -34,7 +33,7 @@ export default function Logo() {
             <Text variant={"h2"} style={{
                 fontWeight: "800",
             }}>
-                {navbarContent.logoText}
+                {logo}
             </Text>
         </div>
     )
diff --git a/react-frontend/src/components/Navbar/index.tsx b/react-frontend/src/components/Navbar/index.tsx
index 2a0d468..f664cfe 100644
--- a/react-frontend/src/components/Navbar/index.tsx
+++ b/react-frontend/src/components/Navbar/index.tsx
@@ -1,11 +1,15 @@
-import { CSSProperties, useMemo } from 'react'
+import { CSSProperties, useEffect, useMemo, useState } from 'react'
 import { useThemeContext } from '../../contexts/ThemeContext';
 import Logo from './Logo'
 import Links from './Links';
+import { SanityNavbarData } from '../../Types';
+import { getNavbarData } from '../../APIs';
+import Loader from '../Loader';
 
 export default function Navbar() {
+    const [navbarData, setNavbarData] = useState<SanityNavbarData | null>(null);
     const { theme } = useThemeContext();
-    const outerStyle = useMemo(() : CSSProperties => ({
+    const outerStyle = useMemo((): CSSProperties => ({
         position: "fixed",
         padding: "1rem",
         width: "100%",
@@ -16,7 +20,7 @@ export default function Navbar() {
         ...theme.bluryStyle.main,
         border: "none"
     }), [theme]);
-    const innerStyle = useMemo(() : CSSProperties => ({
+    const innerStyle = useMemo((): CSSProperties => ({
         display: 'flex',
         justifyContent: 'space-between',
         alignItems: 'center',
@@ -27,10 +31,16 @@ export default function Navbar() {
         flexWrap: "wrap",
     }), []);
 
+    useEffect(() => {
+        getNavbarData().then((data) => {
+            setNavbarData(data);
+        });
+    }, []);
+
     return (
         <div style={outerStyle}>
             <div style={innerStyle}>
-                <Logo />
+                {navbarData ? <Logo logo={navbarData.logo} /> : <Loader />}
                 <Links />
             </div>
         </div>
diff --git a/react-frontend/src/components/ProjectCard/index.tsx b/react-frontend/src/components/ProjectCard/index.tsx
index be1b9a1..fbd48d8 100644
--- a/react-frontend/src/components/ProjectCard/index.tsx
+++ b/react-frontend/src/components/ProjectCard/index.tsx
@@ -41,7 +41,7 @@ export default function ProjectCard({
     return (
         <div style={containerStyle}>
             <Image
-                imgSrc={imgSrc}
+                imgSrc={imgSrc || "images/placeholder.png"}
                 isSmallScreen={isSmallScreen}
                 projectLink={projectLink}
                 demoLink={demoLink} />
diff --git a/react-frontend/src/containers/About/Content/Description.tsx b/react-frontend/src/containers/About/Content/Description.tsx
index 332b34d..d74bc62 100644
--- a/react-frontend/src/containers/About/Content/Description.tsx
+++ b/react-frontend/src/containers/About/Content/Description.tsx
@@ -1,8 +1,8 @@
 import { memo } from 'react';
 import Text from '../../../components/Text';
-import { aboutPageContent } from '../../../Texts';
+import { SanityAboutPage } from '../../../Types';
 
-function Description() {
+function Description({ description }: Readonly<Pick<SanityAboutPage, 'description'>>) {
     return (
         <div style={{
             display: "flex",
@@ -12,7 +12,7 @@ function Description() {
             marginTop: "1rem",
             gap: "0.5rem",
         }}>
-            {aboutPageContent.description.split("\n").map((paragraph, index) => (
+            {description.split("\n").map((paragraph) => (
                 <Text variant="body" key={paragraph.substring(0, 5)} style={{
                     fontSize: "1.1rem",
                 }}>
diff --git a/react-frontend/src/containers/About/Content/Name.tsx b/react-frontend/src/containers/About/Content/Name.tsx
index 915ddf0..ae629e2 100644
--- a/react-frontend/src/containers/About/Content/Name.tsx
+++ b/react-frontend/src/containers/About/Content/Name.tsx
@@ -1,9 +1,9 @@
 import { useThemeContext } from '../../../contexts/ThemeContext';
 import Text from '../../../components/Text';
-import { aboutPageContent } from '../../../Texts';
 import { memo, useMemo } from 'react';
+import { SanityAboutPage } from '../../../Types';
 
-function Name() {
+function Name({ personName }: Readonly<Pick<SanityAboutPage, 'personName'>>) {
     const { theme } = useThemeContext();
     const textStyle = useMemo(() => {
         return {
@@ -15,7 +15,7 @@ function Name() {
 
     return (
         <Text variant="body" style={textStyle}>
-            {aboutPageContent.name}
+            {personName}
         </Text>
     )
 }
diff --git a/react-frontend/src/containers/About/Content/Position.tsx b/react-frontend/src/containers/About/Content/Position.tsx
index ae6eeaf..693dc24 100644
--- a/react-frontend/src/containers/About/Content/Position.tsx
+++ b/react-frontend/src/containers/About/Content/Position.tsx
@@ -1,9 +1,9 @@
 import { useThemeContext } from '../../../contexts/ThemeContext';
 import Text from '../../../components/Text';
-import { aboutPageContent } from '../../../Texts';
 import { memo, useMemo } from 'react';
+import { SanityAboutPage } from '../../../Types';
 
-function Position() {
+function Position({ position }: Readonly<Pick<SanityAboutPage, 'position'>>) {
     const { theme } = useThemeContext();
     const textStyle = useMemo(() => {
         return {
@@ -17,7 +17,7 @@ function Position() {
 
     return (
         <Text variant="h2" style={textStyle}>
-            {aboutPageContent.position}
+            {position}
         </Text>
     )
 }
diff --git a/react-frontend/src/containers/About/Content/ResumeButton.tsx b/react-frontend/src/containers/About/Content/ResumeButton.tsx
index 88888ef..963a2fa 100644
--- a/react-frontend/src/containers/About/Content/ResumeButton.tsx
+++ b/react-frontend/src/containers/About/Content/ResumeButton.tsx
@@ -1,18 +1,17 @@
 import Button from '../../../components/Button';
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faFileLines } from '@fortawesome/free-solid-svg-icons';
-import { getResumeURL } from '../../../APIs';
-import { aboutPageContent } from '../../../Texts';
 import { memo } from 'react';
+import { SanityAboutPage } from '../../../Types';
 
-function ResumeButton() {
+function ResumeButton({ resume }: Readonly<Pick<SanityAboutPage, 'resume'>>) {
     return (
         <Button
             icon={<FontAwesomeIcon icon={faFileLines} />}
-            text={aboutPageContent.resume}
+            text={resume.text}
             pointer={true}
             onClick={() => {
-                window.open(getResumeURL(), "_blank")
+                window.open(resume.link, "_blank")
             }}
             style={{
                 marginTop: "1rem",
diff --git a/react-frontend/src/containers/About/Content/Salutation.tsx b/react-frontend/src/containers/About/Content/Salutation.tsx
index bb1e4d8..5049b9b 100644
--- a/react-frontend/src/containers/About/Content/Salutation.tsx
+++ b/react-frontend/src/containers/About/Content/Salutation.tsx
@@ -1,13 +1,13 @@
 import { memo } from 'react';
 import Text from '../../../components/Text';
-import { aboutPageContent } from '../../../Texts';
+import { SanityAboutPage } from '../../../Types';
 
-function Salutation() {
+function Salutation({ salutation }: Readonly<Pick<SanityAboutPage, 'salutation'>>) {
     return (
         <Text variant="body" style={{
             fontSize: "2.2rem",
         }}>
-            {aboutPageContent.salutation}
+            {salutation}
         </Text>
     )
 }
diff --git a/react-frontend/src/containers/About/Content/SeekingPhrase.tsx b/react-frontend/src/containers/About/Content/SeekingPhrase.tsx
index 748d738..5c42008 100644
--- a/react-frontend/src/containers/About/Content/SeekingPhrase.tsx
+++ b/react-frontend/src/containers/About/Content/SeekingPhrase.tsx
@@ -1,11 +1,11 @@
 import { memo } from 'react';
 import Text from '../../../components/Text';
-import { aboutPageContent } from '../../../Texts';
+import { SanityAboutPage } from '../../../Types';
 
-function SeekingPhrase() {
+function SeekingPhrase({ seeking }: Readonly<Pick<SanityAboutPage, 'seeking'>>) {
     return (
         <Text variant="h2">
-            {aboutPageContent.seeking}
+            {seeking}
         </Text>
     )
 }
diff --git a/react-frontend/src/containers/About/Content/index.tsx b/react-frontend/src/containers/About/Content/index.tsx
index c6b4c5b..8f1b99d 100644
--- a/react-frontend/src/containers/About/Content/index.tsx
+++ b/react-frontend/src/containers/About/Content/index.tsx
@@ -6,20 +6,28 @@ import Position from './Position';
 import Description from './Description';
 import ResumeButton from './ResumeButton';
 import { memo } from 'react';
+import { SanityAboutPage } from '../../../Types';
 
-function Content() {
+function Content({
+    seeking,
+    personName,
+    description,
+    resume,
+    position,
+    salutation,
+}: Readonly<Omit<SanityAboutPage, 'personImage'>>) {
     const isMediumScreen = useMediaQuery({ query: '(max-width: 1124px)' });
 
     return (
         <div style={{
             textAlign: isMediumScreen ? "center" : "left",
         }}>
-            <Salutation />
-            <Name />
-            <SeekingPhrase />
-            <Position />
-            <Description />
-            <ResumeButton />
+            <Salutation salutation={salutation} />
+            <Name personName={personName} />
+            <SeekingPhrase seeking={seeking} />
+            <Position position={position} />
+            <Description description={description} />
+            <ResumeButton resume={resume} />
         </div>
     )
 }
diff --git a/react-frontend/src/containers/About/Image/GithubImage.tsx b/react-frontend/src/containers/About/Image/ActualImage.tsx
similarity index 76%
rename from react-frontend/src/containers/About/Image/GithubImage.tsx
rename to react-frontend/src/containers/About/Image/ActualImage.tsx
index 72276d8..5e56ca9 100644
--- a/react-frontend/src/containers/About/Image/GithubImage.tsx
+++ b/react-frontend/src/containers/About/Image/ActualImage.tsx
@@ -1,7 +1,7 @@
 import { CSSProperties, useMemo } from 'react';
-import { getGithubImageURL } from '../../../APIs';
+import { SanityAboutPage } from '../../../Types';
 
-export default function GithubImage() {
+export default function ActualImage({ personImage }: Readonly<Pick<SanityAboutPage, 'personImage'>>) {
     const imageFrameStyle = useMemo((): CSSProperties => ({
         width: "100%",
         height: "100%",
@@ -20,7 +20,7 @@ export default function GithubImage() {
 
     return (
         <div style={imageFrameStyle}>
-            <img src={getGithubImageURL("shawkyebrahim2514")}
+            <img src={personImage}
                 alt="Shawky Ebrahim"
                 style={imageStyle} />
         </div>
diff --git a/react-frontend/src/containers/About/Image/index.tsx b/react-frontend/src/containers/About/Image/index.tsx
index 27f83fc..a4407ca 100644
--- a/react-frontend/src/containers/About/Image/index.tsx
+++ b/react-frontend/src/containers/About/Image/index.tsx
@@ -1,8 +1,9 @@
 import { CSSProperties, memo, useMemo } from 'react';
 import BackShape from './BackShape';
-import GithubImage from './GithubImage';
+import ActualImage from './ActualImage';
+import { SanityAboutPage } from '../../../Types';
 
-function Image() {
+function Image({ personImage }: Readonly<Pick<SanityAboutPage, 'personImage'>>) {
     const containerStyle = useMemo((): CSSProperties => ({
         width: "320px",
         height: "320px",
@@ -13,7 +14,7 @@ function Image() {
     return (
         <div style={containerStyle}>
             <BackShape />
-            <GithubImage />
+            <ActualImage personImage={personImage} />
         </div>
     )
 }
diff --git a/react-frontend/src/containers/About/index.tsx b/react-frontend/src/containers/About/index.tsx
index 1f52a5b..268cc4c 100644
--- a/react-frontend/src/containers/About/index.tsx
+++ b/react-frontend/src/containers/About/index.tsx
@@ -2,9 +2,13 @@ import { useMediaQuery } from 'react-responsive';
 import ContainerWrap from '../../components/ContainerWrap'
 import Content from './Content';
 import Image from './Image';
-import { CSSProperties, useMemo } from 'react';
+import { CSSProperties, useEffect, useMemo, useState } from 'react';
+import { SanityAboutPage } from '../../Types';
+import { getAboutPage } from '../../APIs';
+import Loader from '../../components/Loader';
 
 function About() {
+    const [aboutPage, setAboutPage] = useState<SanityAboutPage | null>(null);
     const isMediumScreen = useMediaQuery({ query: '(max-width: 1124px)' });
     const containerStyle = useMemo((): CSSProperties => ({
         display: "flex",
@@ -14,11 +18,28 @@ function About() {
         gap: "2rem",
     }), [isMediumScreen]);
 
+    useEffect(() => {
+        getAboutPage().then((result) => {
+            setAboutPage(result);
+        });
+    }, []);
+
     return (
-        <div style={containerStyle}>
-            <Content />
-            <Image />
-        </div>
+        <>
+            {aboutPage ? (
+                <div style={containerStyle}>
+                    <Content
+                        seeking={aboutPage.seeking}
+                        personName={aboutPage.personName}
+                        description={aboutPage.description}
+                        resume={aboutPage.resume}
+                        position={aboutPage.position}
+                        salutation={aboutPage.salutation}
+                    />
+                    <Image personImage={aboutPage.personImage} />
+                </div>
+            ) : <Loader />}
+        </>
     )
 }
 
diff --git a/react-frontend/src/containers/Contacts/Content.tsx b/react-frontend/src/containers/Contacts/Content.tsx
new file mode 100644
index 0000000..c9f4de7
--- /dev/null
+++ b/react-frontend/src/containers/Contacts/Content.tsx
@@ -0,0 +1,29 @@
+import { memo } from "react";
+import { SanityContactsPage } from "../../Types";
+import Icon from "../../components/Icon";
+
+function Content({ contacts }: Readonly<Pick<SanityContactsPage, "contacts">>) {
+    return (
+        <div style={{
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            gap: "2rem",
+            flexWrap: "wrap",
+        }}>
+            {contacts.map((contact) => {
+                return (
+                    <Icon
+                        key={contact.name}
+                        src={contact.imgSrc}
+                        alt={contact.name}
+                        text={contact.name}
+                        pointer={true}
+                        onClick={() => window.open(contact.link, "_blank")} />
+                )
+            })}
+        </div>
+    )
+}
+
+export default memo(Content)
\ No newline at end of file
diff --git a/react-frontend/src/containers/Contacts/ListContacts/ContactsItems.tsx b/react-frontend/src/containers/Contacts/ListContacts/ContactsItems.tsx
deleted file mode 100644
index 0b131be..0000000
--- a/react-frontend/src/containers/Contacts/ListContacts/ContactsItems.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import { memo } from "react";
-import Icon from "../../../components/Icon"
-import { Contact } from "../../../Types";
-
-type ContactsItemsProps = {
-    readonly contacts: Contact[]
-}
-
-function ContactsItems({ contacts }: ContactsItemsProps) {
-    return (
-        <>
-            {contacts.map((contact, index) => {
-                return (
-                    <Icon
-                        key={contact.name}
-                        src={contact.imgSrc}
-                        alt={contact.name}
-                        text={contact.name}
-                        pointer={true}
-                        onClick={() => window.open(contact.link, "_blank")} />
-                )
-            })}
-        </>
-    )
-}
-
-export default memo(ContactsItems);
\ No newline at end of file
diff --git a/react-frontend/src/containers/Contacts/ListContacts/index.tsx b/react-frontend/src/containers/Contacts/ListContacts/index.tsx
deleted file mode 100644
index 821ef26..0000000
--- a/react-frontend/src/containers/Contacts/ListContacts/index.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import { useEffect, useState } from "react";
-import { getContacts } from '../../../APIs';
-import { Contact } from "../../../Types";
-import Loader from "../../../components/Loader";
-import ContactsItems from "./ContactsItems";
-
-export default function ListContacts() {
-    const [contacts, setContacts] = useState<Contact[] | null>(null);
-
-    useEffect(() => {
-        getContacts().then((result) => {
-            let newState: Contact[] = [];
-            result.forEach((element) => {
-                newState.push({
-                    link: element.link,
-                    name: element.name,
-                    imgSrc: element.imgSrc,
-                })
-            })
-
-            setContacts(newState);
-        })
-    }, []);
-
-    return (
-        <>
-            {contacts ? <ContactsItems contacts={contacts} /> : <Loader />}
-        </>
-    )
-}
\ No newline at end of file
diff --git a/react-frontend/src/containers/Contacts/index.tsx b/react-frontend/src/containers/Contacts/index.tsx
index 5fede07..d0f229b 100644
--- a/react-frontend/src/containers/Contacts/index.tsx
+++ b/react-frontend/src/containers/Contacts/index.tsx
@@ -1,10 +1,13 @@
-import { CSSProperties, useMemo } from 'react'
+import { CSSProperties, useEffect, useMemo, useState } from 'react'
 import ContainerWrap from '../../components/ContainerWrap';
-import SectionTitle from '../../components/SectionTitle';
-import ListContacts from './ListContacts';
-import { contactsPageContent } from '../../Texts';
+import { getContactsPage } from '../../APIs';
+import { SanityContactsPage } from '../../Types';
+import Loader from '../../components/Loader';
+import Content from './Content';
+import Title from '../Title';
 
 function Contacts() {
+    const [contactsPage, setContactsPage] = useState<SanityContactsPage | null>(null);
     const containerStyle = useMemo((): CSSProperties => ({
         display: "flex",
         flexDirection: "column",
@@ -13,27 +16,21 @@ function Contacts() {
         gap: "2rem",
     }), []);
 
-    return (
-        <div style={containerStyle}>
-            <SectionTitle
-                highlightedText={contactsPageContent.highlightedTitle}
-                text={contactsPageContent.titlePhrase} />
-            <SectionContent />
-        </div>
-    )
-}
+    useEffect(() => {
+        getContactsPage().then((result) => {
+            setContactsPage(result);
+        })
+    }, []);
 
-function SectionContent() {
     return (
-        <div style={{
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "center",
-            gap: "2rem",
-            flexWrap: "wrap",
-        }}>
-            <ListContacts />
-        </div>
+        <>
+            {contactsPage ? (
+                <div style={containerStyle}>
+                    <Title title={contactsPage.title} />
+                    <Content contacts={contactsPage.contacts} />
+                </div>
+            ) : <Loader />}
+        </>
     )
 }
 
diff --git a/react-frontend/src/containers/Education/MainSectionContent/CoursesItems.tsx b/react-frontend/src/containers/Education/Content/CoursesItems.tsx
similarity index 90%
rename from react-frontend/src/containers/Education/MainSectionContent/CoursesItems.tsx
rename to react-frontend/src/containers/Education/Content/CoursesItems.tsx
index cfcc9c1..36027f1 100644
--- a/react-frontend/src/containers/Education/MainSectionContent/CoursesItems.tsx
+++ b/react-frontend/src/containers/Education/Content/CoursesItems.tsx
@@ -3,14 +3,10 @@ import MainSection from '../../../components/MainSection'
 import Text from '../../../components/Text'
 import ListButtons from '../../../components/ListButtons'
 import ListItems from '../../../components/ListItems'
-import { Course } from '../../../Types';
 import { CSSProperties, memo, useMemo } from 'react';
+import { SanityEducationPage } from '../../../Types';
 
-type CoursesItemsProps = {
-    readonly courses: Course[]
-}
-
-function CoursesItems({ courses }: CoursesItemsProps) {
+function CoursesItems({ courses }: Readonly<Pick<SanityEducationPage["education"], "courses">>) {
     const courseSectionStyle = useMemo((): CSSProperties => ({
         display: "flex",
         flexDirection: "column",
diff --git a/react-frontend/src/containers/Education/Content/EducationInformation.tsx b/react-frontend/src/containers/Education/Content/EducationInformation.tsx
new file mode 100644
index 0000000..5c289dd
--- /dev/null
+++ b/react-frontend/src/containers/Education/Content/EducationInformation.tsx
@@ -0,0 +1,24 @@
+import { CSSProperties, useMemo } from 'react';
+import Text from '../../../components/Text'
+import { SanityEducationPage } from '../../../Types';
+
+export default function EducationInformation({ location, date }: Readonly<Pick<SanityEducationPage["education"], 'location' | 'date'>>) {
+    const containerStyle = useMemo((): CSSProperties => ({
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "space-between",
+        gap: "1rem",
+        width: "100%",
+    }), []);
+
+    return (
+        <div style={containerStyle}>
+            <Text variant={"body"}>
+                {`From ${date.start} - to ${date.end}`}
+            </Text>
+            <Text variant={"body"}>
+                {`${location}`}
+            </Text>
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/react-frontend/src/containers/Education/Content/index.tsx b/react-frontend/src/containers/Education/Content/index.tsx
new file mode 100644
index 0000000..b8e5034
--- /dev/null
+++ b/react-frontend/src/containers/Education/Content/index.tsx
@@ -0,0 +1,28 @@
+import { memo, useMemo } from "react";
+import { SanityEducationPage } from "../../../Types";
+import MainSection from "../../../components/MainSection";
+import { CSSProperties } from "styled-components";
+import EducationInformation from "./EducationInformation";
+import CoursesItems from "./CoursesItems";
+
+function Content({ education }: Readonly<Pick<SanityEducationPage, "education">>) {
+    const containerStyle = useMemo((): CSSProperties => ({
+        display: "flex",
+        justifyContent: "center",
+        flexDirection: "column",
+        gap: "1rem",
+    }), []);
+
+    return (
+        <MainSection
+            title={education.name}
+            subtitle={education.description}>
+            <div style={containerStyle}>
+                <EducationInformation location={education.location} date={education.date} />
+                <CoursesItems courses={education.courses} />
+            </div>
+        </MainSection>
+    )
+}
+
+export default memo(Content);
\ No newline at end of file
diff --git a/react-frontend/src/containers/Education/MainSectionContent/EducationInformation.tsx b/react-frontend/src/containers/Education/MainSectionContent/EducationInformation.tsx
deleted file mode 100644
index 99671f4..0000000
--- a/react-frontend/src/containers/Education/MainSectionContent/EducationInformation.tsx
+++ /dev/null
@@ -1,47 +0,0 @@
-import { CSSProperties, useMemo } from 'react';
-import Text from '../../../components/Text'
-import { useThemeContext } from '../../../contexts/ThemeContext';
-import { educationPageContent } from '../../../Texts';
-
-export default function EducationInformation() {
-    return (
-        <>
-            <FullDataAndLocation />
-            <RelevantCourseworkTitle />
-        </>
-    )
-}
-
-function FullDataAndLocation() {
-    const containerStyle = useMemo((): CSSProperties => ({
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "space-between",
-        gap: "1rem",
-        width: "100%",
-    }), []);
-
-    return (
-        <div style={containerStyle}>
-            <Text variant={"body"}>
-                {educationPageContent.college.fullDate}
-            </Text>
-            <Text variant={"body"}>
-                {educationPageContent.college.location}
-            </Text>
-        </div>
-    )
-}
-
-function RelevantCourseworkTitle() {
-    const { theme } = useThemeContext();
-    const titleStyle = useMemo((): CSSProperties => ({
-        color: theme.colors.main.full,
-    }), [theme.colors.main]);
-
-    return (
-        <Text variant={"body"} style={titleStyle}>
-            Relevant Coursework
-        </Text>
-    )
-}
\ No newline at end of file
diff --git a/react-frontend/src/containers/Education/MainSectionContent/ListCourses.tsx b/react-frontend/src/containers/Education/MainSectionContent/ListCourses.tsx
deleted file mode 100644
index d799c1b..0000000
--- a/react-frontend/src/containers/Education/MainSectionContent/ListCourses.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-import { getEducationCourses } from '../../../APIs'
-import { Course, SanityEducationCourse } from '../../../Types';
-import { useEffect, useState } from 'react';
-import Loader from '../../../components/Loader';
-import CoursesItems from './CoursesItems';
-
-export default function ListCourses() {
-    const [courses, setCourses] = useState<Course[] | null>(null);
-
-    useEffect(() => {
-        getEducationCourses().then((result) => {
-            result = sortResultFromSanity(result);
-            let newState: Course[] = []
-            result.forEach((element) => {
-                newState.push(formatCourseFromSanity(element));
-            })
-            setCourses(newState);
-        });
-    }, []);
-
-    return (
-        <>
-            {courses ? <CoursesItems courses={courses} /> : <Loader />}
-        </>
-    )
-}
-
-function sortResultFromSanity(result: SanityEducationCourse[]): SanityEducationCourse[] {
-    return result.sort((element1, element2) => {
-        return element2.rank - element1.rank;
-    });
-}
-
-function formatCourseFromSanity(course: any): Course {
-    return {
-        description: course.description,
-        name: course.name,
-        technologies: course.technologies,
-    }
-}
\ No newline at end of file
diff --git a/react-frontend/src/containers/Education/MainSectionContent/index.tsx b/react-frontend/src/containers/Education/MainSectionContent/index.tsx
deleted file mode 100644
index 3198503..0000000
--- a/react-frontend/src/containers/Education/MainSectionContent/index.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import { CSSProperties, useMemo } from 'react';
-import ListCourses from './ListCourses';
-import EducationInformation from './EducationInformation';
-
-export default function Content() {
-    const containerStyle = useMemo((): CSSProperties => ({
-        display: "flex",
-        justifyContent: "center",
-        flexDirection: "column",
-        gap: "1rem",
-    }), []);
-
-    return (
-        <div style={containerStyle}>
-            <EducationInformation />
-            <ListCourses />
-        </div>
-    )
-}
\ No newline at end of file
diff --git a/react-frontend/src/containers/Education/index.tsx b/react-frontend/src/containers/Education/index.tsx
index 111f80b..1e57269 100644
--- a/react-frontend/src/containers/Education/index.tsx
+++ b/react-frontend/src/containers/Education/index.tsx
@@ -1,11 +1,13 @@
 import ContainerWrap from '../../components/ContainerWrap'
-import SectionTitle from '../../components/SectionTitle'
-import MainSection from '../../components/MainSection'
-import { CSSProperties, useMemo } from 'react';
-import MainSectionContent from './MainSectionContent';
-import { educationPageContent } from '../../Texts';
+import { CSSProperties, useEffect, useMemo, useState } from 'react';
+import { SanityEducationPage } from '../../Types';
+import { getEducationPage } from '../../APIs';
+import Loader from '../../components/Loader';
+import Title from '../Title';
+import Content from './Content';
 
 function Education() {
+    const [educationPage, setEducationPage] = useState<SanityEducationPage | null>(null);
     const containerStyle = useMemo((): CSSProperties => ({
         display: "flex",
         flexDirection: "column",
@@ -14,26 +16,22 @@ function Education() {
         gap: "2rem",
     }), []);
 
+    useEffect(() => {
+        getEducationPage().then((result) => {
+            setEducationPage(result);
+        });
+    }, []);
 
     return (
-        <div style={containerStyle}>
-            {/* Title */}
-            <SectionTitle
-                highlightedText={educationPageContent.highlightedTitle}
-                text={educationPageContent.titlePhrase} />
-
-            {/* Content */}
-            <MainSection
-                title={educationPageContent.college.name}
-                subtitle={createCollegePhrase()}>
-                <MainSectionContent />
-            </MainSection>
-        </div>
+        <>
+            {educationPage ? (
+                <div style={containerStyle}>
+                    <Title title={educationPage.title} />
+                    <Content education={educationPage.education} />
+                </div>
+            ) : <Loader />}
+        </>
     )
 }
 
-function createCollegePhrase() {
-    return educationPageContent.college.degree + " | " + educationPageContent.college.gpa;
-}
-
 export default ContainerWrap(Education)
diff --git a/react-frontend/src/containers/Experience/Certificates/Content.tsx b/react-frontend/src/containers/Experience/Certificates/Content.tsx
new file mode 100644
index 0000000..428fe68
--- /dev/null
+++ b/react-frontend/src/containers/Experience/Certificates/Content.tsx
@@ -0,0 +1,35 @@
+import { useMemo } from "react";
+import { CSSProperties } from "styled-components";
+import { SanityExperiencePage } from "../../../Types";
+import MainSection from "../../../components/MainSection";
+import ExperienceItemInformation from "../ExperienceItemInformation";
+import ExperienceItemDescription from "../ExperienceItemDescription";
+
+function Content({ certificates }: Readonly<Pick<SanityExperiencePage['certificatesSection'], 'certificates'>>) {
+    const containerStyle = useMemo((): CSSProperties => ({
+        display: "flex",
+        justifyContent: "center",
+        flexDirection: "column",
+        gap: "1rem",
+    }), []);
+
+    return (
+        <>
+            {certificates.map((certificate) => {
+                return (
+                    <MainSection
+                        key={certificate.title}
+                        title={certificate.title}
+                        link={certificate.link} >
+                        <div style={containerStyle}>
+                            <ExperienceItemInformation subTitle={certificate.subTitle} date={certificate.date} />
+                            {certificate.description && <ExperienceItemDescription description={certificate.description} />}
+                        </div>
+                    </MainSection>
+                )
+            })}
+        </>
+    )
+}
+
+export default Content;
\ No newline at end of file
diff --git a/react-frontend/src/containers/Experience/ListCertificates/SubtitleAndDate.tsx b/react-frontend/src/containers/Experience/Certificates/SubtitleAndDate.tsx
similarity index 100%
rename from react-frontend/src/containers/Experience/ListCertificates/SubtitleAndDate.tsx
rename to react-frontend/src/containers/Experience/Certificates/SubtitleAndDate.tsx
diff --git a/react-frontend/src/containers/Experience/Certificates/index.tsx b/react-frontend/src/containers/Experience/Certificates/index.tsx
new file mode 100644
index 0000000..cd2ef79
--- /dev/null
+++ b/react-frontend/src/containers/Experience/Certificates/index.tsx
@@ -0,0 +1,15 @@
+import { memo } from "react";
+import { SanityExperiencePage } from "../../../Types";
+import Title from "../../Title";
+import Content from "./Content";
+
+function Certificates({ certificatesSection }: Readonly<Pick<SanityExperiencePage, 'certificatesSection'>>) {
+    return (
+        <>
+            <Title title={certificatesSection.title} />
+            <Content certificates={certificatesSection.certificates} />
+        </>
+    )
+}
+
+export default memo(Certificates)
\ No newline at end of file
diff --git a/react-frontend/src/containers/Experience/ListInternships/ExperienceItemDescription.tsx b/react-frontend/src/containers/Experience/ExperienceItemDescription.tsx
similarity index 52%
rename from react-frontend/src/containers/Experience/ListInternships/ExperienceItemDescription.tsx
rename to react-frontend/src/containers/Experience/ExperienceItemDescription.tsx
index 11004e4..8327ee3 100644
--- a/react-frontend/src/containers/Experience/ListInternships/ExperienceItemDescription.tsx
+++ b/react-frontend/src/containers/Experience/ExperienceItemDescription.tsx
@@ -1,13 +1,15 @@
-import Text from '../../../components/Text'
-import ListItems from '../../../components/ListItems'
+import Text from '../../components/Text'
+import ListItems from '../../components/ListItems'
 import { CSSProperties, useMemo } from 'react'
-import { Internship } from '../../../Types'
+import { SanityExperiencePage } from '../../Types'
+import { useThemeContext } from '../../contexts/ThemeContext'
 
 type ExperienceItemDescriptionProps = {
-    readonly description: Internship["description"]
+    readonly description: SanityExperiencePage['internshipsSection']['internships'][0]['description']
 }
 
 export default function ExperienceItemDescription({ description }: ExperienceItemDescriptionProps) {
+    const { theme } = useThemeContext();
     const containerStyle = useMemo((): CSSProperties => ({
         display: "flex",
         alignItems: "flex-start",
@@ -15,10 +17,13 @@ export default function ExperienceItemDescription({ description }: ExperienceIte
         width: "fit-content",
         gap: "0.5rem",
     }), []);
+    const descriptionStyle = useMemo((): CSSProperties => ({
+        color: theme.colors.main.full,
+    }), [theme]);
 
     return (
         <div style={containerStyle}>
-            <Text variant={"h4"}>
+            <Text variant={"h4"} style={descriptionStyle}>
                 Description
             </Text>
             <ListItems elements={description.split("\n")} />
diff --git a/react-frontend/src/containers/Experience/ListInternships/ExperienceItemInformation.tsx b/react-frontend/src/containers/Experience/ExperienceItemInformation.tsx
similarity index 70%
rename from react-frontend/src/containers/Experience/ListInternships/ExperienceItemInformation.tsx
rename to react-frontend/src/containers/Experience/ExperienceItemInformation.tsx
index bfcec5a..a2c8394 100644
--- a/react-frontend/src/containers/Experience/ListInternships/ExperienceItemInformation.tsx
+++ b/react-frontend/src/containers/Experience/ExperienceItemInformation.tsx
@@ -1,10 +1,9 @@
-import Text from '../../../components/Text'
+import Text from '../../components/Text'
 import { CSSProperties, useMemo } from 'react'
-import { Internship } from '../../../Types'
 
 type ExperienceItemInformationProps = {
     readonly subTitle: string,
-    readonly date: Internship["date"]
+    readonly date: string
 }
 
 export default function ExperienceItemInformation({ subTitle, date }: ExperienceItemInformationProps) {
@@ -22,12 +21,8 @@ export default function ExperienceItemInformation({ subTitle, date }: Experience
                 {subTitle}
             </Text>
             <Text variant={"body"}>
-                {formatDate({ date })}
+                {date}
             </Text>
         </div>
     )
-}
-
-function formatDate({ date }: Pick<Internship, "date">) {
-    return `From: ${date.from} - To: ${date.to}`
 }
\ No newline at end of file
diff --git a/react-frontend/src/containers/Experience/Internships/Content.tsx b/react-frontend/src/containers/Experience/Internships/Content.tsx
new file mode 100644
index 0000000..e217b6e
--- /dev/null
+++ b/react-frontend/src/containers/Experience/Internships/Content.tsx
@@ -0,0 +1,41 @@
+import { useMemo } from "react";
+import { CSSProperties } from "styled-components";
+import { SanityExperiencePage } from "../../../Types";
+import MainSection from "../../../components/MainSection";
+import ExperienceItemInformation from "../ExperienceItemInformation";
+import ExperienceItemDescription from "../ExperienceItemDescription";
+import ListButtons from "../../../components/ListButtons";
+
+function Content({ internships }: Readonly<Pick<SanityExperiencePage['internshipsSection'], 'internships'>>) {
+    const containerStyle = useMemo((): CSSProperties => ({
+        display: "flex",
+        justifyContent: "center",
+        flexDirection: "column",
+        gap: "1rem",
+    }), []);
+
+    return (
+        <>
+            {internships.map((internship) => {
+                return (
+                    <MainSection
+                        key={internship.title}
+                        title={internship.title}
+                        link={internship.link} >
+                        <div style={containerStyle}>
+                            <ExperienceItemInformation subTitle={internship.subTitle} date={formatDate(internship.date)} />
+                            <ExperienceItemDescription description={internship.description} />
+                            <ListButtons elements={internship.technologies} />
+                        </div>
+                    </MainSection>
+                )
+            })}
+        </>
+    )
+}
+
+function formatDate(date: SanityExperiencePage['internshipsSection']['internships'][0]['date']) {
+    return `From: ${date.from} - To: ${date.to}`
+}
+
+export default Content;
\ No newline at end of file
diff --git a/react-frontend/src/containers/Experience/Internships/index.tsx b/react-frontend/src/containers/Experience/Internships/index.tsx
new file mode 100644
index 0000000..6e4b0bd
--- /dev/null
+++ b/react-frontend/src/containers/Experience/Internships/index.tsx
@@ -0,0 +1,15 @@
+import { memo } from "react";
+import { SanityExperiencePage } from "../../../Types";
+import Title from "../../Title";
+import Content from "./Content";
+
+function Internships({ internshipsSection }: Readonly<Pick<SanityExperiencePage, 'internshipsSection'>>) {
+    return (
+        <>
+            <Title title={internshipsSection.title} />
+            <Content internships={internshipsSection.internships} />
+        </>
+    )
+}
+
+export default memo(Internships);
\ No newline at end of file
diff --git a/react-frontend/src/containers/Experience/ListCertificates/CertificatesItems.tsx b/react-frontend/src/containers/Experience/ListCertificates/CertificatesItems.tsx
deleted file mode 100644
index 4acf9eb..0000000
--- a/react-frontend/src/containers/Experience/ListCertificates/CertificatesItems.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-import MainSection from '../../../components/MainSection'
-import { CSSProperties, memo, useMemo } from 'react'
-import { Certificate } from '../../../Types'
-import SubtitleAndDate from './SubtitleAndDate';
-import Description from './Description';
-
-type CertificatesItemsProps = {
-    readonly certificates: Certificate[]
-}
-
-function CertificatesItems({ certificates }: CertificatesItemsProps) {
-    const containerStyle = useMemo((): CSSProperties => ({
-        display: "flex",
-        justifyContent: "center",
-        flexDirection: "column",
-        gap: "1rem",
-    }), []);
-
-    return (
-        <>
-            {certificates.map((certificate, index) => {
-                return (
-                    <MainSection
-                        key={certificate.title}
-                        title={certificate.title}
-                        link={certificate.link} >
-                        <div style={containerStyle}>
-                            <SubtitleAndDate subTitle={certificate.subTitle} date={certificate.date} />
-                            <Description description={certificate.description} />
-                        </div>
-                    </MainSection>
-                )
-            })}
-        </>
-    )
-}
-
-export default memo(CertificatesItems);
\ No newline at end of file
diff --git a/react-frontend/src/containers/Experience/ListCertificates/Description.tsx b/react-frontend/src/containers/Experience/ListCertificates/Description.tsx
deleted file mode 100644
index 3b7c68d..0000000
--- a/react-frontend/src/containers/Experience/ListCertificates/Description.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import Text from '../../../components/Text'
-import ListItems from '../../../components/ListItems'
-import { useThemeContext } from '../../../contexts/ThemeContext';
-import { CSSProperties, useMemo } from 'react'
-import { Certificate } from '../../../Types'
-
-type DescriptionProps = {
-    readonly description: Certificate["description"]
-}
-
-export default function Description({ description }: DescriptionProps) {
-    const { theme } = useThemeContext();
-    const containerStyle = useMemo((): CSSProperties => ({
-        display: "flex",
-        alignItems: "flex-start",
-        flexDirection: "column",
-        width: "fit-content",
-        gap: "0.5rem",
-    }), []);
-    const descriptionStyle = useMemo((): CSSProperties => ({
-        color: theme.colors.main.full,
-    }), [theme]);
-
-    return (
-        <>
-            {description && (
-                <div style={containerStyle}>
-                    <Text variant={"h4"} style={descriptionStyle}>
-                        Description
-                    </Text>
-                    <ListItems elements={description.split("\n")} />
-                </div>
-            )}
-        </>
-    )
-}
\ No newline at end of file
diff --git a/react-frontend/src/containers/Experience/ListCertificates/index.tsx b/react-frontend/src/containers/Experience/ListCertificates/index.tsx
deleted file mode 100644
index 23fe510..0000000
--- a/react-frontend/src/containers/Experience/ListCertificates/index.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-import { getCertificates } from '../../../APIs'
-import { useEffect, useState } from 'react'
-import { Certificate } from '../../../Types'
-import { SanityCertificate } from '../../../Types/sanity';
-import Loader from '../../../components/Loader';
-import CertificatesItems from './CertificatesItems';
-
-export default function ListCertificates() {
-    const [certificates, setCertificates] = useState<Certificate[] | null>(null);
-
-    useEffect(() => {
-        getCertificates().then((result) => {
-            result = sortResultFromSanity(result);
-            let newState: Certificate[] = [];
-            result.forEach((element) => {
-                newState.push(formatCertificateFromSanity(element));
-            })
-            setCertificates(newState);
-        });
-    }, []);
-
-    return (
-        <>
-            {certificates ? <CertificatesItems certificates={certificates} /> : <Loader />}
-        </>
-    )
-}
-
-function sortResultFromSanity(result: SanityCertificate[]): SanityCertificate[] {
-    return result.sort((element1, element2) => {
-        return element2.rank - element1.rank;
-    });
-}
-
-function formatCertificateFromSanity(certificate: SanityCertificate): Certificate {
-    return {
-        description: certificate.description,
-        title: certificate.title,
-        subTitle: certificate.subTitle,
-        link: certificate.link,
-        date: certificate.date,
-    }
-}
\ No newline at end of file
diff --git a/react-frontend/src/containers/Experience/ListInternships/ExperiencesItems.tsx b/react-frontend/src/containers/Experience/ListInternships/ExperiencesItems.tsx
deleted file mode 100644
index ac8d92e..0000000
--- a/react-frontend/src/containers/Experience/ListInternships/ExperiencesItems.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-import MainSection from '../../../components/MainSection'
-import ListButtons from '../../../components/ListButtons'
-import { CSSProperties, memo, useMemo } from 'react'
-import { Internship } from '../../../Types'
-import ExperienceItemInformation from './ExperienceItemInformation'
-import ExperienceItemDescription from './ExperienceItemDescription'
-
-type ExperiencesItemsProps = {
-    readonly experiences: Internship[]
-}
-
-function ExperiencesItems({ experiences }: ExperiencesItemsProps) {
-    const containerStyle = useMemo((): CSSProperties => ({
-        display: "flex",
-        justifyContent: "center",
-        flexDirection: "column",
-        gap: "1rem",
-    }), []);
-
-    return (
-        <>
-            {experiences.map((experience, index) => {
-                return (
-                    <MainSection
-                        key={experience.title}
-                        title={experience.title}
-                        link={experience.link} >
-                        <div style={containerStyle}>
-                            <ExperienceItemInformation subTitle={experience.subTitle} date={experience.date} />
-                            <ExperienceItemDescription description={experience.description} />
-                            <ListButtons elements={experience.technologies} />
-                        </div>
-                    </MainSection>
-                )
-            })}
-        </>
-    )
-}
-
-export default memo(ExperiencesItems);
\ No newline at end of file
diff --git a/react-frontend/src/containers/Experience/ListInternships/index.tsx b/react-frontend/src/containers/Experience/ListInternships/index.tsx
deleted file mode 100644
index c4255aa..0000000
--- a/react-frontend/src/containers/Experience/ListInternships/index.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-import { getInternships } from '../../../APIs'
-import { useEffect, useState } from 'react'
-import { Internship, SanityInternship } from '../../../Types'
-import Loader from '../../../components/Loader';
-import ExperiencesItems from './ExperiencesItems'
-
-export default function ListInternships() {
-    const [experiences, setExperiences] = useState<Internship[] | null>(null);
-
-    useEffect(() => {
-        getInternships().then((result) => {
-            result = sortResultFromSanity(result);
-            let newState: Internship[] = [];
-            result.forEach((element) => {
-                newState.push(formatInternshipFromSanity(element));
-            })
-            setExperiences(newState);
-        });
-    }, []);
-
-    return (
-        <>
-            {experiences ? <ExperiencesItems experiences={experiences} /> : <Loader />}
-        </>
-    )
-}
-
-function sortResultFromSanity(result: SanityInternship[]): SanityInternship[] {
-    return result.sort((element1, element2) => {
-        return element2.rank - element1.rank;
-    });
-}
-
-function formatInternshipFromSanity(internship: SanityInternship): Internship {
-    return {
-        description: internship.description,
-        title: internship.title,
-        subTitle: internship.subTitle,
-        technologies: internship.technologies,
-        link: internship.link,
-        date: internship.date,
-    }
-}
\ No newline at end of file
diff --git a/react-frontend/src/containers/Experience/index.tsx b/react-frontend/src/containers/Experience/index.tsx
index c5d98a1..bc70b22 100644
--- a/react-frontend/src/containers/Experience/index.tsx
+++ b/react-frontend/src/containers/Experience/index.tsx
@@ -1,11 +1,13 @@
-import { CSSProperties, useMemo } from 'react'
+import { CSSProperties, useEffect, useMemo, useState } from 'react'
 import ContainerWrap from '../../components/ContainerWrap'
-import SectionTitle from '../../components/SectionTitle'
-import ListInternships from './ListInternships';
-import { experiencePageContent } from '../../Texts';
-import ListCertificates from './ListCertificates';
+import { SanityExperiencePage } from '../../Types';
+import Certificates from './Certificates';
+import { getExperiencePage } from '../../APIs';
+import Loader from '../../components/Loader';
+import Internships from './Internships';
 
 function Experience() {
+    const [experiences, setExperiences] = useState<SanityExperiencePage | null>(null);
     const containerStyle = useMemo((): CSSProperties => ({
         display: "flex",
         flexDirection: "column",
@@ -14,32 +16,20 @@ function Experience() {
         gap: "2rem",
     }), []);
 
-    return (
-        <div style={containerStyle}>
-            <InternshipsAndTraining />
-            <Certificates />
-        </div>
-    )
-}
-
-function InternshipsAndTraining() {
-    return (
-        <>
-            <SectionTitle
-                highlightedText={experiencePageContent.internships.highlightedTitle}
-                text={experiencePageContent.internships.titlePhrase} />
-            <ListInternships />
-        </>
-    )
-}
+    useEffect(() => {
+        getExperiencePage().then((result) => {
+            setExperiences(result);
+        });
+    }, []);
 
-function Certificates() {
     return (
         <>
-            <SectionTitle
-                highlightedText={experiencePageContent.certificates.highlightedTitle}
-                text={experiencePageContent.certificates.titlePhrase} />
-            <ListCertificates />
+            {experiences ? (
+                <div style={containerStyle}>
+                    <Internships internshipsSection={experiences.internshipsSection} />
+                    <Certificates certificatesSection={experiences.certificatesSection} />
+                </div>
+            ) : <Loader />}
         </>
     )
 }
diff --git a/react-frontend/src/containers/Projects/ListProjects/ProjectsItems.tsx b/react-frontend/src/containers/Projects/Content.tsx
similarity index 61%
rename from react-frontend/src/containers/Projects/ListProjects/ProjectsItems.tsx
rename to react-frontend/src/containers/Projects/Content.tsx
index f24056a..302ae90 100644
--- a/react-frontend/src/containers/Projects/ListProjects/ProjectsItems.tsx
+++ b/react-frontend/src/containers/Projects/Content.tsx
@@ -1,15 +1,11 @@
-import { memo } from "react";
-import ProjectCard from "../../../components/ProjectCard";
-import { Project } from "../../../Types";
+import { memo } from "react"
+import { SanityProjectsPage } from "../../Types"
+import ProjectCard from "../../components/ProjectCard"
 
-type ProjectsItemsProps = {
-    readonly projects: Project[]
-}
-
-function ProjectsItems({ projects }: ProjectsItemsProps) {
+function Content({ projects }: Readonly<Pick<SanityProjectsPage, "projects">>) {
     return (
         <>
-            {projects.map((project, index) => {
+            {projects.map((project) => {
                 return (
                     <ProjectCard
                         key={project.name}
@@ -26,4 +22,4 @@ function ProjectsItems({ projects }: ProjectsItemsProps) {
     )
 }
 
-export default memo(ProjectsItems);
\ No newline at end of file
+export default memo(Content)
\ No newline at end of file
diff --git a/react-frontend/src/containers/Projects/ListProjects/index.tsx b/react-frontend/src/containers/Projects/ListProjects/index.tsx
deleted file mode 100644
index 630f8e7..0000000
--- a/react-frontend/src/containers/Projects/ListProjects/index.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-import { useEffect, useState } from "react";
-import { getProjects } from '../../../APIs';
-import { Project, SanityProject } from "../../../Types";
-import Loader from "../../../components/Loader";
-import ProjectsItems from "./ProjectsItems";
-
-export default function ListProjects() {
-    const [projects, setProjects] = useState<Project[] | null>(null);
-
-    useEffect(() => {
-        getProjects().then((result) => {
-            result = sortResultFromSanity(result);
-            let newState: Project[] = [];
-            result.forEach((element) => {
-                newState.push(formatProjectItemFromSanity(element));
-            })
-            setProjects(newState);
-        })
-    }, []);
-
-    return (
-        <>
-            {projects ? <ProjectsItems projects={projects} /> : <Loader />}
-        </>
-    )
-}
-
-function sortResultFromSanity(result: SanityProject[]): SanityProject[] {
-    return result.sort((element1, element2) => {
-        return element2.rank - element1.rank;
-    });
-}
-
-function formatProjectItemFromSanity(element: SanityProject): Project {
-    return {
-        description: element.description,
-        name: element.name,
-        technologies: element.technologies,
-        links: {
-            demoLink: element.links?.demoLink,
-            projectLink: element.links?.projectLink,
-        },
-        imgSrc: element.imgSrc,
-    }
-}
\ No newline at end of file
diff --git a/react-frontend/src/containers/Projects/index.tsx b/react-frontend/src/containers/Projects/index.tsx
index 8e79f93..f4a99a2 100644
--- a/react-frontend/src/containers/Projects/index.tsx
+++ b/react-frontend/src/containers/Projects/index.tsx
@@ -1,10 +1,13 @@
-import { CSSProperties, useMemo } from 'react'
+import { CSSProperties, useEffect, useMemo, useState } from 'react'
 import ContainerWrap from '../../components/ContainerWrap';
-import SectionTitle from '../../components/SectionTitle';
-import ListProjects from './ListProjects';
-import { projectsPageContent } from '../../Texts';
+import { SanityProjectsPage } from '../../Types';
+import { getProjectsPage } from '../../APIs';
+import Loader from '../../components/Loader';
+import Title from '../Title';
+import Content from './Content';
 
 function Projects() {
+    const [projects, setProjects] = useState<SanityProjectsPage | null>(null);
     const containerStyle = useMemo((): CSSProperties => ({
         display: "flex",
         flexDirection: "column",
@@ -13,13 +16,21 @@ function Projects() {
         gap: "2rem",
     }), []);
 
+    useEffect(() => {
+        getProjectsPage().then((result) => {
+            setProjects(result);
+        })
+    }, []);
+
     return (
-        <div style={containerStyle}>
-            <SectionTitle
-                highlightedText={projectsPageContent.highlightedTitle}
-                text={projectsPageContent.titlePhrase} />
-            <ListProjects />
-        </div>
+        <>
+            {projects ? (
+                <div style={containerStyle}>
+                    <Title title={projects.title} />
+                    <Content projects={projects.projects} />
+                </div>
+            ) : <Loader />}
+        </>
     )
 }
 
diff --git a/react-frontend/src/containers/Skills/Content/SkillsIcons.tsx b/react-frontend/src/containers/Skills/Content/SkillsIcons.tsx
new file mode 100644
index 0000000..2c9e1f9
--- /dev/null
+++ b/react-frontend/src/containers/Skills/Content/SkillsIcons.tsx
@@ -0,0 +1,17 @@
+import { SanitySkillsPage } from '../../../Types'
+import Icon from '../../../components/Icon'
+
+export default function SkillsIcons({ skills }: Readonly<Pick<SanitySkillsPage['categories'][number], 'skills'>>) {
+    return (
+        <>
+            {skills.map((skill) => {
+                return (
+                    <Icon
+                        key={skill.name}
+                        src={skill.iconURL}
+                        text={skill.name} />
+                )
+            })}
+        </>
+    )
+}
diff --git a/react-frontend/src/containers/Skills/Content/TechnologiesItems.tsx b/react-frontend/src/containers/Skills/Content/TechnologiesItems.tsx
deleted file mode 100644
index 610a9dc..0000000
--- a/react-frontend/src/containers/Skills/Content/TechnologiesItems.tsx
+++ /dev/null
@@ -1,47 +0,0 @@
-import CenteredSection from '../../../components/CenteredSection'
-import ListIcons from './listIcons';
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faCode } from '@fortawesome/free-solid-svg-icons';
-import { CSSProperties, memo, useMemo } from 'react';
-import { TechnologySkill, TechnologyCategory } from '../../../Types';
-
-type StateTechnology = Record<TechnologyCategory, TechnologySkill[]>;
-
-type TechnologiesItemsProps = {
-    readonly technologies: StateTechnology
-}
-
-function TechnologiesItems({ technologies }: TechnologiesItemsProps) {
-    const listItemsContainerStyle = useMemo((): CSSProperties => ({
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
-        gap: "1rem",
-        flexWrap: "wrap",
-    }), []);
-
-    return (
-        <>
-            {Object.entries(technologies).map(([technologyTitle, technologyIcons]) => {
-                return (
-                    <CenteredSection
-                        key={technologyTitle}
-                        icon={<HeaderIcon />}
-                        title={technologyTitle} >
-                        <div style={listItemsContainerStyle}>
-                            <ListIcons list={technologyIcons} />
-                        </div>
-                    </CenteredSection>
-                )
-            })}
-        </>
-    )
-}
-
-function HeaderIcon() {
-    return (
-        <FontAwesomeIcon icon={faCode} size={"xl"} />
-    )
-}
-
-export default memo(TechnologiesItems);
\ No newline at end of file
diff --git a/react-frontend/src/containers/Skills/Content/index.tsx b/react-frontend/src/containers/Skills/Content/index.tsx
index 2550ba1..0c30587 100644
--- a/react-frontend/src/containers/Skills/Content/index.tsx
+++ b/react-frontend/src/containers/Skills/Content/index.tsx
@@ -1,51 +1,40 @@
-import { useEffect, useState } from 'react';
-import { getSkills } from '../../../APIs';
-import { TechnologySkill, TechnologyCategory, SanitySkill } from '../../../Types';
-import Loader from '../../../components/Loader';
-import TechnologiesItems from './TechnologiesItems';
+import { useMemo } from 'react';
+import { CSSProperties } from 'styled-components';
+import { SanitySkillsPage } from '../../../Types';
+import CenteredSection from '../../../components/CenteredSection';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faCode } from '@fortawesome/free-solid-svg-icons';
+import SkillsIcons from './SkillsIcons';
 
-type StateTechnology = Record<TechnologyCategory, TechnologySkill[]>;
-
-export default function Content() {
-    const [technologies, setTechnologies] = useState<StateTechnology | null>(null);
-
-    useEffect(() => {
-        getSkills().then((result) => {
-            result = sortResultFromSanity(result);
-            let newState: StateTechnology = initiateStateTechnology();
-            result.forEach((element) => {
-                newState[element.categoryName].push(formatTechnologyItemFromSanity(element));
-            })
-            setTechnologies(newState)
-        })
-    }, [])
+export default function Content({ categories }: Readonly<Pick<SanitySkillsPage, "categories">>) {
+    const listItemsContainerStyle = useMemo((): CSSProperties => ({
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        gap: "1rem",
+        flexWrap: "wrap",
+    }), []);
 
     return (
         <>
-            {technologies ? <TechnologiesItems technologies={technologies} /> : <Loader />}
+            {categories.map((category) => {
+                return (
+                    <CenteredSection
+                        key={category.title}
+                        icon={<HeaderIcon />}
+                        title={category.title} >
+                        <div style={listItemsContainerStyle}>
+                            <SkillsIcons skills={category.skills} />
+                        </div>
+                    </CenteredSection>
+                )
+            })}
         </>
     )
 }
 
-function initiateStateTechnology(): StateTechnology {
-    return {
-        "General": [],
-        "Frontend": [],
-        "Backend": [],
-        "Databases": [],
-        "Tools": [],
-    }
-}
-
-function sortResultFromSanity(result: SanitySkill[]): SanitySkill[] {
-    return result.sort((element1, element2) => {
-        return element1.rank - element2.rank;
-    });
-}
-
-function formatTechnologyItemFromSanity(element: SanitySkill): TechnologySkill {
-    return {
-        iconURL: element.iconURL,
-        name: element.name,
-    }
+function HeaderIcon() {
+    return (
+        <FontAwesomeIcon icon={faCode} size={"xl"} />
+    )
 }
\ No newline at end of file
diff --git a/react-frontend/src/containers/Skills/Content/listIcons.tsx b/react-frontend/src/containers/Skills/Content/listIcons.tsx
deleted file mode 100644
index 99a7ef2..0000000
--- a/react-frontend/src/containers/Skills/Content/listIcons.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import Icon from '../../../components/Icon'
-import { TechnologySkill } from '../../../Types';
-
-type ListIconsProps = {
-    readonly list: TechnologySkill[]
-}
-
-export default function listIcons({ list }: ListIconsProps) {
-    return (
-        <>
-            {list.map((icon, index) => {
-                return (
-                    <Icon
-                        key={icon.name}
-                        src={icon.iconURL}
-                        text={icon.name} />
-                )
-            })}
-        </>
-    )
-}
diff --git a/react-frontend/src/containers/Skills/index.tsx b/react-frontend/src/containers/Skills/index.tsx
index 1b2f493..b884c9f 100644
--- a/react-frontend/src/containers/Skills/index.tsx
+++ b/react-frontend/src/containers/Skills/index.tsx
@@ -1,11 +1,14 @@
 import ContainerWrap from '../../components/ContainerWrap'
-import SectionTitle from '../../components/SectionTitle'
 import Content from './Content';
-import { CSSProperties, useMemo } from 'react';
-import { skillsPageContent } from '../../Texts';
+import { CSSProperties, useEffect, useMemo, useState } from 'react';
+import { SanitySkillsPage } from '../../Types';
+import { getSkillsPage } from '../../APIs';
+import Title from '../Title';
+import Loader from '../../components/Loader';
 
 function Skills() {
-    const containerStyle = useMemo(():CSSProperties => ({
+    const [skillsPage, setSkillsPage] = useState<SanitySkillsPage | null>(null);
+    const containerStyle = useMemo((): CSSProperties => ({
         display: "flex",
         flexDirection: "column",
         alignItems: "stretch",
@@ -13,13 +16,21 @@ function Skills() {
         gap: "2rem",
     }), []);
 
+    useEffect(() => {
+        getSkillsPage().then((result) => {
+            setSkillsPage(result)
+        })
+    }, [])
+
     return (
-        <div style={containerStyle}>
-            <SectionTitle
-                highlightedText={skillsPageContent.highlightedTitle}
-                text={skillsPageContent.titlePhrase} />
-            <Content />
-        </div>
+        <>
+            {skillsPage ? (
+                <div style={containerStyle}>
+                    <Title title={skillsPage.title} />
+                    <Content categories={skillsPage.categories} />
+                </div>
+            ) : <Loader />}
+        </>
     )
 }
 
diff --git a/react-frontend/src/containers/Title.tsx b/react-frontend/src/containers/Title.tsx
new file mode 100644
index 0000000..a18f4be
--- /dev/null
+++ b/react-frontend/src/containers/Title.tsx
@@ -0,0 +1,13 @@
+import { memo } from "react";
+import { CommonTitle } from "../Types";
+import SectionTitle from "../components/SectionTitle";
+
+function Content({ title }: Readonly<CommonTitle>) {
+    return (
+        <SectionTitle
+            highlightedText={title.highlightedText}
+            text={title.subText} />
+    )
+}
+
+export default memo(Content);
\ No newline at end of file
diff --git a/sanity-backend/package-lock.json b/sanity-backend/package-lock.json
index 57383cc..1c539a2 100644
--- a/sanity-backend/package-lock.json
+++ b/sanity-backend/package-lock.json
@@ -14,6 +14,7 @@
         "@sanity/vision": "^3.19.1",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
+        "react-icons": "^5.0.1",
         "react-is": "^18.2.0",
         "sanity": "^3.19.1",
         "styled-components": "^6.0.7"
@@ -8338,6 +8339,14 @@
         }
       }
     },
+    "node_modules/react-icons": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.0.1.tgz",
+      "integrity": "sha512-WqLZJ4bLzlhmsvme6iFdgO8gfZP17rfjYEJ2m9RsZjZ+cc4k1hTzknEz63YS1MeT50kVzoa1Nz36f4BEx+Wigw==",
+      "peerDependencies": {
+        "react": "*"
+      }
+    },
     "node_modules/react-is": {
       "version": "18.2.0",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
diff --git a/sanity-backend/package.json b/sanity-backend/package.json
index 6ee1a16..ee2c7c3 100644
--- a/sanity-backend/package.json
+++ b/sanity-backend/package.json
@@ -20,6 +20,7 @@
     "@sanity/vision": "^3.19.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-icons": "^5.0.1",
     "react-is": "^18.2.0",
     "sanity": "^3.19.1",
     "styled-components": "^6.0.7"
diff --git a/sanity-backend/schemas/index.ts b/sanity-backend/schemas/index.ts
index d9c198c..d360134 100644
--- a/sanity-backend/schemas/index.ts
+++ b/sanity-backend/schemas/index.ts
@@ -1,17 +1,19 @@
-import { skillsCategories } from './skillsCategories'
-import { skills } from './skills'
-import { collegeCourses } from './collegeCourses'
-import { internships } from './internships'
-import { projects } from './projects'
-import { contacts } from './contacts'
-import { certificates } from './certificates'
+// Get react-icons from https://react-icons.github.io/react-icons/#/
+
+import { skills } from './units/skills'
+import { collegeCourses } from './units/collegeCourses'
+import { internships } from './units/internships'
+import { projects } from './units/projects'
+import { contacts } from './units/contacts'
+import { certificates } from './units/certificates'
+import { portfolio } from './portfolio'
 
 export const schemaTypes = [
-    skillsCategories,
+    portfolio,
     skills,
     collegeCourses,
     internships,
     projects,
+    certificates,
     contacts,
-    certificates
 ]
diff --git a/sanity-backend/schemas/portfolio/about.ts b/sanity-backend/schemas/portfolio/about.ts
new file mode 100644
index 0000000..27ace62
--- /dev/null
+++ b/sanity-backend/schemas/portfolio/about.ts
@@ -0,0 +1,72 @@
+import { changeDocumentPreviewTitle } from "./commanFields";
+import { FaCircleInfo } from "react-icons/fa6";
+
+export const aboutPage = {
+    name: 'aboutPage',
+    type: 'document',
+    title: 'About Page',
+    icon: FaCircleInfo,
+    ...changeDocumentPreviewTitle("About Page"),
+    fields: [
+        {
+            name: 'personImage',
+            title: 'Person Image',
+            type: 'url',
+            validation: Rule => Rule.uri({
+                scheme: ['http', 'https']
+            }).required()
+        },
+        {
+            name: 'salutation',
+            type: 'string',
+            title: 'Salutation',
+            validation: Rule => Rule.required()
+        },
+        {
+            name: 'personName',
+            type: 'string',
+            title: 'Person Name',
+            validation: Rule => Rule.required()
+        },
+        {
+            name: 'seeking',
+            type: 'string',
+            title: 'Seeking',
+            validation: Rule => Rule.required()
+        },
+        {
+            name: 'position',
+            type: 'string',
+            title: 'Position',
+            validation: Rule => Rule.required()
+        },
+        {
+            name: 'description',
+            type: 'text',
+            title: 'Description',
+            validation: Rule => Rule.required()
+        },
+        {
+            name: 'resume',
+            type: 'object',
+            title: 'Resume',
+            fields: [
+                {
+                    name: 'text',
+                    type: 'string',
+                    title: 'Resume Text',
+                    validation: Rule => Rule.required()
+                },
+                {
+                    name: 'link',
+                    type: 'url',
+                    title: 'Resume Link',
+                    validation: Rule => Rule.uri({
+                        scheme: ['http', 'https']
+                    }).required()
+                },
+            ],
+            validation: Rule => Rule.required()
+        }
+    ]
+}
\ No newline at end of file
diff --git a/sanity-backend/schemas/portfolio/commanFields.ts b/sanity-backend/schemas/portfolio/commanFields.ts
new file mode 100644
index 0000000..a264dc8
--- /dev/null
+++ b/sanity-backend/schemas/portfolio/commanFields.ts
@@ -0,0 +1,32 @@
+export const commanTitle = {
+    name: 'title',
+    type: 'object',
+    title: 'Title',
+    fields: [
+        {
+            name: 'highlightedText',
+            type: 'string',
+            title: 'Highlighted Text',
+            validation: Rule => Rule.required()
+        },
+        {
+            name: 'subText',
+            type: 'string',
+            title: 'Sub Text',
+            validation: Rule => Rule.required()
+        }
+    ],
+    validation: Rule => Rule.required()
+}
+
+export const changeDocumentPreviewTitle = (title: string) => {
+    return {
+        preview: {
+            prepare() {
+                return {
+                    title: title,
+                }
+            }
+        },
+    }
+}
\ No newline at end of file
diff --git a/sanity-backend/schemas/portfolio/contacts.ts b/sanity-backend/schemas/portfolio/contacts.ts
new file mode 100644
index 0000000..9201c9b
--- /dev/null
+++ b/sanity-backend/schemas/portfolio/contacts.ts
@@ -0,0 +1,30 @@
+import { commanTitle, changeDocumentPreviewTitle } from "./commanFields";
+import { MdContacts } from "react-icons/md";
+
+export const contactsPage = {
+    name: 'contactsPage',
+    type: 'document',
+    title: 'Contacts Page',
+    icon: MdContacts,
+    ...changeDocumentPreviewTitle("Contacts Page"),
+    fields: [
+        commanTitle,
+        {
+            name: 'contacts',
+            type: 'array',
+            title: 'Contacts',
+            validation: Rule => Rule.unique().required(),
+            of: [
+                {
+                    type: 'reference',
+                    name: 'contact',
+                    to: [
+                        {
+                            type: 'contacts'
+                        }
+                    ]
+                }
+            ]
+        }
+    ]
+}
\ No newline at end of file
diff --git a/sanity-backend/schemas/portfolio/education.ts b/sanity-backend/schemas/portfolio/education.ts
new file mode 100644
index 0000000..49ecd90
--- /dev/null
+++ b/sanity-backend/schemas/portfolio/education.ts
@@ -0,0 +1,80 @@
+import { commanTitle, changeDocumentPreviewTitle } from "./commanFields";
+import { PiStudentFill } from "react-icons/pi";
+
+export const educationPage = {
+    name: 'educationPage',
+    type: 'document',
+    title: 'Education Page',
+    icon: PiStudentFill,
+    ...changeDocumentPreviewTitle("Education Page"),
+    fields: [
+        commanTitle,
+        {
+            name: 'education',
+            type: 'object',
+            title: 'Education',
+            fields: [
+                {
+                    name: 'name',
+                    type: 'string',
+                    title: 'Name',
+                    validation: Rule => Rule.required()
+                },
+                {
+                    name: 'description',
+                    type: 'text',
+                    title: 'Description',
+                    validation: Rule => Rule.required()
+                },
+                {
+                    name: 'date',
+                    type: 'object',
+                    title: 'Date',
+                    fields: [
+                        {
+                            name: 'start',
+                            type: 'date',
+                            title: 'Start Date',
+                            options: {
+                                dateFormat: 'MM-YYYY'
+                            },
+                            validation: Rule => Rule.required()
+                        },
+                        {
+                            name: 'end',
+                            type: 'date',
+                            title: 'End Date',
+                            options: {
+                                dateFormat: 'MM-YYYY'
+                            },
+                            validation: Rule => Rule.required()
+                        }
+                    ]
+                },
+                {
+                    name: 'location',
+                    type: 'string',
+                    title: 'Location',
+                    validation: Rule => Rule.required()
+                },
+                {
+                    name: 'courses',
+                    type: 'array',
+                    title: 'Courses',
+                    validation: Rule => Rule.unique().required(),
+                    of: [
+                        {
+                            type: 'reference',
+                            name: 'course',
+                            to: [
+                                {
+                                    type: 'collegeCourses'
+                                }
+                            ]
+                        }
+                    ]
+                }
+            ]
+        }
+    ]
+}
\ No newline at end of file
diff --git a/sanity-backend/schemas/portfolio/experience.ts b/sanity-backend/schemas/portfolio/experience.ts
new file mode 100644
index 0000000..5743d69
--- /dev/null
+++ b/sanity-backend/schemas/portfolio/experience.ts
@@ -0,0 +1,64 @@
+import { commanTitle, changeDocumentPreviewTitle } from "./commanFields";
+import { GoGoal } from "react-icons/go";
+
+export const experiencePage = {
+    name: 'experiencePage',
+    type: 'document',
+    title: 'Experience Page',
+    icon: GoGoal,
+    ...changeDocumentPreviewTitle("Experience Page"),
+    fields: [
+        {
+            name: 'internshipsSection',
+            type: 'object',
+            title: 'Internships Section',
+            validation: Rule => Rule.required(),
+            fields: [
+                commanTitle,
+                {
+                    name: 'internships',
+                    type: 'array',
+                    title: 'Internships',
+                    validation: Rule => Rule.unique().required(),
+                    of: [
+                        {
+                            type: 'reference',
+                            name: 'internship',
+                            to: [
+                                {
+                                    type: 'internships'
+                                }
+                            ]
+                        }
+                    ]
+                }
+            ]
+        },
+        {
+            name: 'certificatesSection',
+            type: 'object',
+            title: 'Certificates Section',
+            validation: Rule => Rule.required(),
+            fields: [
+                commanTitle,
+                {
+                    name: 'certificates',
+                    type: 'array',
+                    title: 'Certificates',
+                    validation: Rule => Rule.unique().required(),
+                    of: [
+                        {
+                            type: 'reference',
+                            name: 'certificate',
+                            to: [
+                                {
+                                    type: 'certificates'
+                                }
+                            ]
+                        }
+                    ]
+                }
+            ]
+        }
+    ]
+}
\ No newline at end of file
diff --git a/sanity-backend/schemas/portfolio/index.ts b/sanity-backend/schemas/portfolio/index.ts
new file mode 100644
index 0000000..e06db66
--- /dev/null
+++ b/sanity-backend/schemas/portfolio/index.ts
@@ -0,0 +1,49 @@
+import { TbWorldCode } from "react-icons/tb";
+import { aboutPage } from "./about";
+import { skillsPage } from "./skills";
+import { educationPage } from "./education";
+import { experiencePage } from "./experience";
+import { projectsPage } from "./projects";
+import { contactsPage } from "./contacts";
+import { portfolioPagesRestrition } from "./utilities";
+
+export const portfolio = {
+    name: 'portfolio',
+    type: 'document',
+    title: 'Portfolio',
+    icon: TbWorldCode,
+    preview: {
+        select: {
+            title: 'navbar.logo'
+        }
+    },
+    fields: [
+        {
+            name: 'navbar',
+            type: 'object',
+            title: 'Navbar',
+            fields: [
+                {
+                    name: 'logo',
+                    type: 'string',
+                    title: 'Logo',
+                    validation: Rule => Rule.required()
+                },
+            ]
+        },
+        {
+            name: "pages",
+            type: "array",
+            title: "Pages",
+            validation: Rule => Rule.custom(portfolioPagesRestrition),
+            of: [
+                aboutPage,
+                skillsPage,
+                educationPage,
+                experiencePage,
+                projectsPage,
+                contactsPage
+            ]
+        }
+    ]
+}
\ No newline at end of file
diff --git a/sanity-backend/schemas/portfolio/projects.ts b/sanity-backend/schemas/portfolio/projects.ts
new file mode 100644
index 0000000..038f158
--- /dev/null
+++ b/sanity-backend/schemas/portfolio/projects.ts
@@ -0,0 +1,30 @@
+import { commanTitle, changeDocumentPreviewTitle } from "./commanFields";
+import { BiGitRepoForked } from "react-icons/bi";
+
+export const projectsPage = {
+    name: 'projectsPage',
+    type: 'document',
+    title: 'Projects Page',
+    icon: BiGitRepoForked,
+    ...changeDocumentPreviewTitle("Projects Page"),
+    fields: [
+        commanTitle,
+        {
+            name: 'projects',
+            type: 'array',
+            title: 'Projects',
+            validation: Rule => Rule.unique().required(),
+            of: [
+                {
+                    type: 'reference',
+                    name: 'project',
+                    to: [
+                        {
+                            type: 'projects'
+                        }
+                    ]
+                }
+            ]
+        }
+    ]
+}
\ No newline at end of file
diff --git a/sanity-backend/schemas/portfolio/skills.ts b/sanity-backend/schemas/portfolio/skills.ts
new file mode 100644
index 0000000..32ed7c8
--- /dev/null
+++ b/sanity-backend/schemas/portfolio/skills.ts
@@ -0,0 +1,52 @@
+import { commanTitle, changeDocumentPreviewTitle } from "./commanFields";
+import { IoCodeSlash } from "react-icons/io5";
+
+export const skillsPage = {
+    name: 'skillsPage',
+    type: 'document',
+    title: 'Skills Page',
+    icon: IoCodeSlash,
+    ...changeDocumentPreviewTitle("Skills Page"),
+    fields: [
+        commanTitle,
+        {
+            name: 'categories',
+            type: 'array',
+            title: 'Categories',
+            of: [
+                {
+                    type: 'object',
+                    name: 'category',
+                    title: 'Category',
+                    fields: [
+                        {
+                            name: 'title',
+                            type: 'string',
+                            title: 'Title',
+                            validation: Rule => Rule.required()
+                        },
+                        {
+                            name: 'skills',
+                            type: 'array',
+                            title: 'Skills',
+                            validation: Rule => Rule.unique().required(),
+                            of: [
+                                {
+                                    type: 'reference',
+                                    title: 'Skill',
+                                    name: 'skill',
+                                    to: [
+                                        {
+                                            type: 'skills'
+                                        }
+                                    ],
+                                    validation: Rule => Rule.required()
+                                }
+                            ]
+                        }
+                    ]
+                }
+            ]
+        }
+    ]
+}
\ No newline at end of file
diff --git a/sanity-backend/schemas/portfolio/utilities.ts b/sanity-backend/schemas/portfolio/utilities.ts
new file mode 100644
index 0000000..957b734
--- /dev/null
+++ b/sanity-backend/schemas/portfolio/utilities.ts
@@ -0,0 +1,13 @@
+const portfolioPagesRestrition = pages => {
+    if (pages.length !== 6) {
+        return 'You must have 6 pages';
+    }
+    const pageNames = pages.map(page => page._type);
+    const uniquePageNames = [...new Set(pageNames)];
+    if (uniquePageNames.length !== 6) {
+        return 'Each page must be unique';
+    }
+    return true;
+}
+
+export { portfolioPagesRestrition };
\ No newline at end of file
diff --git a/sanity-backend/schemas/skills.ts b/sanity-backend/schemas/skills.ts
deleted file mode 100644
index 1410c73..0000000
--- a/sanity-backend/schemas/skills.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-export const skills = {
-    name: 'skills',
-    type: 'document',
-    title: 'Skills',
-    fields: [
-        {
-            name: 'name',
-            type: 'string',
-            title: 'Name'
-        },
-        {
-            name: 'rank',
-            type: 'number',
-            title: 'Rank',
-            initialValue: 0,
-            validation: Rule => Rule.required()
-        },
-        {
-            name: 'category',
-            type: 'reference',
-            title: 'Category',
-            to: [{ type: 'skillsCategories' }],
-            validation: Rule => Rule.required()
-        },
-        {
-            name: 'icon',
-            type: 'image',
-            title: 'Icon'
-        },
-    ]
-}
\ No newline at end of file
diff --git a/sanity-backend/schemas/skillsCategories.ts b/sanity-backend/schemas/skillsCategories.ts
deleted file mode 100644
index 79f9d77..0000000
--- a/sanity-backend/schemas/skillsCategories.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-export const skillsCategories = {
-    name: 'skillsCategories',
-    type: 'document',
-    title: 'Skills Categories',
-    fields: [
-        {
-            name: 'name',
-            type: 'string',
-            title: 'Name',
-            validation: Rule => Rule.required()
-        },
-    ]
-}
\ No newline at end of file
diff --git a/sanity-backend/schemas/certificates.ts b/sanity-backend/schemas/units/certificates.ts
similarity index 84%
rename from sanity-backend/schemas/certificates.ts
rename to sanity-backend/schemas/units/certificates.ts
index a042d22..36af4f7 100644
--- a/sanity-backend/schemas/certificates.ts
+++ b/sanity-backend/schemas/units/certificates.ts
@@ -1,7 +1,10 @@
+import { PiCertificate } from "react-icons/pi";
+
 export const certificates = {
     name: 'certificates',
     type: 'document',
     title: 'Certificates',
+    icon: PiCertificate,
     fields: [
         {
             name: 'title',
@@ -20,13 +23,6 @@ export const certificates = {
             type: 'text',
             title: 'Description',
         },
-        {
-            name: 'rank',
-            type: 'number',
-            title: 'Rank',
-            initialValue: 0,
-            validation: Rule => Rule.required()
-        },
         {
             name: 'date',
             type: 'date',
diff --git a/sanity-backend/schemas/collegeCourses.ts b/sanity-backend/schemas/units/collegeCourses.ts
similarity index 77%
rename from sanity-backend/schemas/collegeCourses.ts
rename to sanity-backend/schemas/units/collegeCourses.ts
index a89562b..8bf2a03 100644
--- a/sanity-backend/schemas/collegeCourses.ts
+++ b/sanity-backend/schemas/units/collegeCourses.ts
@@ -1,7 +1,10 @@
+import { PiStudentFill } from "react-icons/pi";
+
 export const collegeCourses = {
     name: 'collegeCourses',
     type: 'document',
     title: 'College Courses',
+    icon: PiStudentFill,
     fields: [
         {
             name: 'name',
@@ -9,13 +12,6 @@ export const collegeCourses = {
             title: 'Name',
             validation: Rule => Rule.required()
         },
-        {
-            name: 'rank',
-            type: 'number',
-            title: 'Rank',
-            initialValue: 0,
-            validation: Rule => Rule.required()
-        },
         {
             name: 'description',
             type: 'text',
diff --git a/sanity-backend/schemas/contacts.ts b/sanity-backend/schemas/units/contacts.ts
similarity index 90%
rename from sanity-backend/schemas/contacts.ts
rename to sanity-backend/schemas/units/contacts.ts
index 3c7ded2..2be3200 100644
--- a/sanity-backend/schemas/contacts.ts
+++ b/sanity-backend/schemas/units/contacts.ts
@@ -1,7 +1,10 @@
+import { MdContacts } from "react-icons/md";
+
 export const contacts = {
     name: 'contacts',
     type: 'document',
     title: 'Contacts',
+    icon: MdContacts,
     fields: [
         {
             name: 'name',
diff --git a/sanity-backend/schemas/internships.ts b/sanity-backend/schemas/units/internships.ts
similarity index 90%
rename from sanity-backend/schemas/internships.ts
rename to sanity-backend/schemas/units/internships.ts
index 06b83e4..326bade 100644
--- a/sanity-backend/schemas/internships.ts
+++ b/sanity-backend/schemas/units/internships.ts
@@ -1,7 +1,10 @@
+import { MdFactory } from "react-icons/md";
+
 export const internships = {
     name: 'internships',
     type: 'document',
     title: 'Internships',
+    icon: MdFactory,
     fields: [
         {
             name: 'title',
@@ -15,13 +18,6 @@ export const internships = {
             title: 'Sub Title',
             validation: Rule => Rule.required()
         },
-        {
-            name: 'rank',
-            type: 'number',
-            title: 'Rank',
-            initialValue: 0,
-            validation: Rule => Rule.required()
-        },
         {
             name: 'date',
             type: 'object',
diff --git a/sanity-backend/schemas/projects.ts b/sanity-backend/schemas/units/projects.ts
similarity index 89%
rename from sanity-backend/schemas/projects.ts
rename to sanity-backend/schemas/units/projects.ts
index e23904c..6f7ee3e 100644
--- a/sanity-backend/schemas/projects.ts
+++ b/sanity-backend/schemas/units/projects.ts
@@ -1,7 +1,10 @@
+import { BiGitRepoForked } from "react-icons/bi";
+
 export const projects = {
     name: 'projects',
     type: 'document',
     title: 'Projects',
+    icon: BiGitRepoForked,
     fields: [
         {
             name: 'name',
@@ -9,13 +12,6 @@ export const projects = {
             title: 'Name',
             validation: Rule => Rule.required()
         },
-        {
-            name: 'rank',
-            type: 'number',
-            title: 'Rank',
-            initialValue: 0,
-            validation: Rule => Rule.required()
-        },
         {
             name: 'links',
             type: 'object',
diff --git a/sanity-backend/schemas/units/skills.ts b/sanity-backend/schemas/units/skills.ts
new file mode 100644
index 0000000..9c2500f
--- /dev/null
+++ b/sanity-backend/schemas/units/skills.ts
@@ -0,0 +1,20 @@
+import { IoCodeSlash } from "react-icons/io5";
+
+export const skills = {
+    name: 'skills',
+    type: 'document',
+    title: 'Skills',
+    icon: IoCodeSlash,
+    fields: [
+        {
+            name: 'name',
+            type: 'string',
+            title: 'Name'
+        },
+        {
+            name: 'icon',
+            type: 'image',
+            title: 'Icon'
+        },
+    ]
+}
\ No newline at end of file