diff --git a/.github/workflows/tests.yml b/.github/workflows/tests.yml
index 7e442cb..6bcc95f 100644
--- a/.github/workflows/tests.yml
+++ b/.github/workflows/tests.yml
@@ -36,4 +36,4 @@ jobs:
         with:
           name: playwright-report
           path: playwright-report/
-          retention-days: 30
\ No newline at end of file
+          retention-days: 30
diff --git a/igned-ui-refactor b/igned-ui-refactor
new file mode 100644
index 0000000..901a11c
--- /dev/null
+++ b/igned-ui-refactor
@@ -0,0 +1,298 @@
+
+                   SSUUMMMMAARRYY OOFF LLEESSSS CCOOMMMMAANNDDSS
+
+      Commands marked with * may be preceded by a number, _N.
+      Notes in parentheses indicate the behavior if _N is given.
+      A key preceded by a caret indicates the Ctrl key; thus ^K is ctrl-K.
+
+  h  H                 Display this help.
+  q  :q  Q  :Q  ZZ     Exit.
+ ---------------------------------------------------------------------------
+
+                           MMOOVVIINNGG
+
+  e  ^E  j  ^N  CR  *  Forward  one line   (or _N lines).
+  y  ^Y  k  ^K  ^P  *  Backward one line   (or _N lines).
+  f  ^F  ^V  SPACE  *  Forward  one window (or _N lines).
+  b  ^B  ESC-v      *  Backward one window (or _N lines).
+  z                 *  Forward  one window (and set window to _N).
+  w                 *  Backward one window (and set window to _N).
+  ESC-SPACE         *  Forward  one window, but don't stop at end-of-file.
+  d  ^D             *  Forward  one half-window (and set half-window to _N).
+  u  ^U             *  Backward one half-window (and set half-window to _N).
+  ESC-)  RightArrow *  Right one half screen width (or _N positions).
+  ESC-(  LeftArrow  *  Left  one half screen width (or _N positions).
+  ESC-}  ^RightArrow   Right to last column displayed.
+  ESC-{  ^LeftArrow    Left  to first column.
+  F                    Forward forever; like "tail -f".
+  ESC-F                Like F but stop when search pattern is found.
+  r  ^R  ^L            Repaint screen.
+  R                    Repaint screen, discarding buffered input.
+        ---------------------------------------------------
+        Default "window" is the screen height.
+        Default "half-window" is half of the screen height.
+ ---------------------------------------------------------------------------
+
+                          SSEEAARRCCHHIINNGG
+
+  /_p_a_t_t_e_r_n          *  Search forward for (_N-th) matching line.
+  ?_p_a_t_t_e_r_n          *  Search backward for (_N-th) matching line.
+  n                 *  Repeat previous search (for _N-th occurrence).
+  N                 *  Repeat previous search in reverse direction.
+  ESC-n             *  Repeat previous search, spanning files.
+  ESC-N             *  Repeat previous search, reverse dir. & spanning files.
+  ESC-u                Undo (toggle) search highlighting.
+  ESC-U                Clear search highlighting.
+  &_p_a_t_t_e_r_n          *  Display only matching lines.
+        ---------------------------------------------------
+        A search pattern may begin with one or more of:
+        ^N or !  Search for NON-matching lines.
+        ^E or *  Search multiple files (pass thru END OF FILE).
+        ^F or @  Start search at FIRST file (for /) or last file (for ?).
+        ^K       Highlight matches, but don't move (KEEP position).
+        ^R       Don't use REGULAR EXPRESSIONS.
+        ^S _n     Search for match in _n-th parenthesized subpattern.
+        ^W       WRAP search if no match found.
+ ---------------------------------------------------------------------------
+
+                           JJUUMMPPIINNGG
+
+  g  <  ESC-<       *  Go to first line in file (or line _N).
+  G  >  ESC->       *  Go to last line in file (or line _N).
+  p  %              *  Go to beginning of file (or _N percent into file).
+  t                 *  Go to the (_N-th) next tag.
+  T                 *  Go to the (_N-th) previous tag.
+  {  (  [           *  Find close bracket } ) ].
+  }  )  ]           *  Find open bracket { ( [.
+  ESC-^F _<_c_1_> _<_c_2_>  *  Find close bracket _<_c_2_>.
+  ESC-^B _<_c_1_> _<_c_2_>  *  Find open bracket _<_c_1_>.
+        ---------------------------------------------------
+        Each "find close bracket" command goes forward to the close bracket 
+          matching the (_N-th) open bracket in the top line.
+        Each "find open bracket" command goes backward to the open bracket 
+          matching the (_N-th) close bracket in the bottom line.
+
+  m_<_l_e_t_t_e_r_>            Mark the current top line with <letter>.
+  M_<_l_e_t_t_e_r_>            Mark the current bottom line with <letter>.
+  '_<_l_e_t_t_e_r_>            Go to a previously marked position.
+  ''                   Go to the previous position.
+  ^X^X                 Same as '.
+  ESC-m_<_l_e_t_t_e_r_>        Clear a mark.
+        ---------------------------------------------------
+        A mark is any upper-case or lower-case letter.
+        Certain marks are predefined:
+             ^  means  beginning of the file
+             $  means  end of the file
+ ---------------------------------------------------------------------------
+
+                        CCHHAANNGGIINNGG FFIILLEESS
+
+  :e [_f_i_l_e]            Examine a new file.
+  ^X^V                 Same as :e.
+  :n                *  Examine the (_N-th) next file from the command line.
+  :p                *  Examine the (_N-th) previous file from the command line.
+  :x                *  Examine the first (or _N-th) file from the command line.
+  :d                   Delete the current file from the command line list.
+  =  ^G  :f            Print current file name.
+ ---------------------------------------------------------------------------
+
+                    MMIISSCCEELLLLAANNEEOOUUSS CCOOMMMMAANNDDSS
+
+  -_<_f_l_a_g_>              Toggle a command line option [see OPTIONS below].
+  --_<_n_a_m_e_>             Toggle a command line option, by name.
+  __<_f_l_a_g_>              Display the setting of a command line option.
+  ___<_n_a_m_e_>             Display the setting of an option, by name.
+  +_c_m_d                 Execute the less cmd each time a new file is examined.
+
+  !_c_o_m_m_a_n_d             Execute the shell command with $SHELL.
+  #_c_o_m_m_a_n_d             Execute the shell command, expanded like a prompt.
+  |XX_c_o_m_m_a_n_d            Pipe file between current pos & mark XX to shell command.
+  s _f_i_l_e               Save input to a file.
+  v                    Edit the current file with $VISUAL or $EDITOR.
+  V                    Print version number of "less".
+ ---------------------------------------------------------------------------
+
+                           OOPPTTIIOONNSS
+
+        Most options may be changed either on the command line,
+        or from within less by using the - or -- command.
+        Options may be given in one of two forms: either a single
+        character preceded by a -, or a name preceded by --.
+
+  -?  ........  --help
+                  Display help (from command line).
+  -a  ........  --search-skip-screen
+                  Search skips current screen.
+  -A  ........  --SEARCH-SKIP-SCREEN
+                  Search starts just after target line.
+  -b [_N]  ....  --buffers=[_N]
+                  Number of buffers.
+  -B  ........  --auto-buffers
+                  Don't automatically allocate buffers for pipes.
+  -c  ........  --clear-screen
+                  Repaint by clearing rather than scrolling.
+  -d  ........  --dumb
+                  Dumb terminal.
+  -D xx_c_o_l_o_r  .  --color=xx_c_o_l_o_r
+                  Set screen colors.
+  -e  -E  ....  --quit-at-eof  --QUIT-AT-EOF
+                  Quit at end of file.
+  -f  ........  --force
+                  Force open non-regular files.
+  -F  ........  --quit-if-one-screen
+                  Quit if entire file fits on first screen.
+  -g  ........  --hilite-search
+                  Highlight only last match for searches.
+  -G  ........  --HILITE-SEARCH
+                  Don't highlight any matches for searches.
+  -h [_N]  ....  --max-back-scroll=[_N]
+                  Backward scroll limit.
+  -i  ........  --ignore-case
+                  Ignore case in searches that do not contain uppercase.
+  -I  ........  --IGNORE-CASE
+                  Ignore case in all searches.
+  -j [_N]  ....  --jump-target=[_N]
+                  Screen position of target lines.
+  -J  ........  --status-column
+                  Display a status column at left edge of screen.
+  -k [_f_i_l_e]  .  --lesskey-file=[_f_i_l_e]
+                  Use a lesskey file.
+  -K  ........  --quit-on-intr
+                  Exit less in response to ctrl-C.
+  -L  ........  --no-lessopen
+                  Ignore the LESSOPEN environment variable.
+  -m  -M  ....  --long-prompt  --LONG-PROMPT
+                  Set prompt style.
+  -n .........  --line-numbers
+                  Suppress line numbers in prompts and messages.
+  -N .........  --LINE-NUMBERS
+                  Display line number at start of each line.
+  -o [_f_i_l_e]  .  --log-file=[_f_i_l_e]
+                  Copy to log file (standard input only).
+  -O [_f_i_l_e]  .  --LOG-FILE=[_f_i_l_e]
+                  Copy to log file (unconditionally overwrite).
+  -p [_p_a_t_t_e_r_n]  --pattern=[_p_a_t_t_e_r_n]
+                  Start at pattern (from command line).
+  -P [_p_r_o_m_p_t]   --prompt=[_p_r_o_m_p_t]
+                  Define new prompt.
+  -q  -Q  ....  --quiet  --QUIET  --silent --SILENT
+                  Quiet the terminal bell.
+  -r  -R  ....  --raw-control-chars  --RAW-CONTROL-CHARS
+                  Output "raw" control characters.
+  -s  ........  --squeeze-blank-lines
+                  Squeeze multiple blank lines.
+  -S  ........  --chop-long-lines
+                  Chop (truncate) long lines rather than wrapping.
+  -t [_t_a_g]  ..  --tag=[_t_a_g]
+                  Find a tag.
+  -T [_t_a_g_s_f_i_l_e] --tag-file=[_t_a_g_s_f_i_l_e]
+                  Use an alternate tags file.
+  -u  -U  ....  --underline-special  --UNDERLINE-SPECIAL
+                  Change handling of backspaces, tabs and carriage returns.
+  -V  ........  --version
+                  Display the version number of "less".
+  -w  ........  --hilite-unread
+                  Highlight first new line after forward-screen.
+  -W  ........  --HILITE-UNREAD
+                  Highlight first new line after any forward movement.
+  -x [_N[,...]]  --tabs=[_N[,...]]
+                  Set tab stops.
+  -X  ........  --no-init
+                  Don't use termcap init/deinit strings.
+  -y [_N]  ....  --max-forw-scroll=[_N]
+                  Forward scroll limit.
+  -z [_N]  ....  --window=[_N]
+                  Set size of window.
+  -" [_c[_c]]  .  --quotes=[_c[_c]]
+                  Set shell quote characters.
+  -~  ........  --tilde
+                  Don't display tildes after end of file.
+  -# [_N]  ....  --shift=[_N]
+                  Set horizontal scroll amount (0 = one half screen width).
+                --exit-follow-on-close
+                  Exit F command on a pipe when writer closes pipe.
+                --file-size
+                  Automatically determine the size of the input file.
+                --follow-name
+                  The F command changes files if the input file is renamed.
+                --header=[_N[,_M]]
+                  Use N lines and M columns to display file headers.
+                --incsearch
+                  Search file as each pattern character is typed in.
+                --intr=_C
+                  Use _C instead of ^X to interrupt a read.
+                --line-num-width=_N
+                  Set the width of the -N line number field to _N characters.
+                --modelines=_N
+                  Read _N lines from the input file and look for vim modelines.
+                --mouse
+                  Enable mouse input.
+                --no-keypad
+                  Don't send termcap keypad init/deinit strings.
+                --no-histdups
+                  Remove duplicates from command history.
+                --no-number-headers
+                  Don't give line numbers to header lines.
+                --no-search-headers
+                  Don't search in header lines or columns.
+                --no-vbell
+                  Disable the terminal's visual bell.
+                --redraw-on-quit
+                  Redraw final screen when quitting.
+                --rscroll=_C
+                  Set the character used to mark truncated lines.
+                --save-marks
+                  Retain marks across invocations of less.
+                --search-options=[EFKNRW-]
+                  Set default options for every search.
+                --show-preproc-errors
+                  Display a message if preprocessor exits with an error status.
+                --proc-backspace
+                  Process backspaces for bold/underline.
+                --SPECIAL-BACKSPACE
+                  Treat backspaces as control characters.
+                --proc-return
+                  Delete carriage returns before newline.
+                --SPECIAL-RETURN
+                  Treat carriage returns as control characters.
+                --proc-tab
+                  Expand tabs to spaces.
+                --SPECIAL-TAB
+                  Treat tabs as control characters.
+                --status-col-width=_N
+                  Set the width of the -J status column to _N characters.
+                --status-line
+                  Highlight or color the entire line containing a mark.
+                --use-backslash
+                  Subsequent options use backslash as escape char.
+                --use-color
+                  Enables colored text.
+                --wheel-lines=_N
+                  Each click of the mouse wheel moves _N lines.
+                --wordwrap
+                  Wrap lines at spaces.
+
+
+ ---------------------------------------------------------------------------
+
+                          LLIINNEE EEDDIITTIINNGG
+
+        These keys can be used to edit text being entered 
+        on the "command line" at the bottom of the screen.
+
+ RightArrow ..................... ESC-l ... Move cursor right one character.
+ LeftArrow ...................... ESC-h ... Move cursor left one character.
+ ctrl-RightArrow  ESC-RightArrow  ESC-w ... Move cursor right one word.
+ ctrl-LeftArrow   ESC-LeftArrow   ESC-b ... Move cursor left one word.
+ HOME ........................... ESC-0 ... Move cursor to start of line.
+ END ............................ ESC-$ ... Move cursor to end of line.
+ BACKSPACE ................................ Delete char to left of cursor.
+ DELETE ......................... ESC-x ... Delete char under cursor.
+ ctrl-BACKSPACE   ESC-BACKSPACE ........... Delete word to left of cursor.
+ ctrl-DELETE .... ESC-DELETE .... ESC-X ... Delete word under cursor.
+ ctrl-U ......... ESC (MS-DOS only) ....... Delete entire line.
+ UpArrow ........................ ESC-k ... Retrieve previous command line.
+ DownArrow ...................... ESC-j ... Retrieve next command line.
+ TAB ...................................... Complete filename & cycle.
+ SHIFT-TAB ...................... ESC-TAB   Complete filename & reverse cycle.
+ ctrl-L ................................... Complete filename, list all.
diff --git a/package-lock.json b/package-lock.json
index e194b49..1a47f29 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1555,9 +1555,9 @@
 			}
 		},
 		"node_modules/caniuse-lite": {
-			"version": "1.0.30001612",
-			"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001612.tgz",
-			"integrity": "sha512-lFgnZ07UhaCcsSZgWW0K5j4e69dK1u/ltrL9lTUiFOwNHs12S3UMIEYgBV0Z6C6hRDev7iRnMzzYmKabYdXF9g==",
+			"version": "1.0.30001754",
+			"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001754.tgz",
+			"integrity": "sha512-x6OeBXueoAceOmotzx3PO4Zpt4rzpeIFsSr6AAePTZxSkXiYDUmpypEl7e2+8NCd9bD7bXjqyef8CJYPC1jfxg==",
 			"dev": true,
 			"funding": [
 				{
@@ -1572,7 +1572,8 @@
 					"type": "github",
 					"url": "https://github.com/sponsors/ai"
 				}
-			]
+			],
+			"license": "CC-BY-4.0"
 		},
 		"node_modules/chai": {
 			"version": "4.4.1",
diff --git a/src/app.html b/src/app.html
index c9f0eba..47de2be 100644
--- a/src/app.html
+++ b/src/app.html
@@ -6,7 +6,7 @@
 		<meta name="viewport" content="width=device-width" />
 		%sveltekit.head%
 	</head>
-	<body data-sveltekit-preload-data="hover" data-theme="sso-custom-theme">
-		<div style="display: contents" class="h-full overflow-hidden">%sveltekit.body%</div>
+	<body data-sveltekit-preload-data="hover">
+		<main style="display: contents" class="h-full overflow-hidden">%sveltekit.body%</main>
 	</body>
 </html>
diff --git a/src/app.postcss b/src/app.postcss
index 8ef7d35..d0cb91c 100644
--- a/src/app.postcss
+++ b/src/app.postcss
@@ -3,7 +3,125 @@
 @tailwind utilities;
 @tailwind variants;
 
+:root {
+	--background-color-100: #ffffffbf;
+	--background-color-200: #ffffff;
+	--font-color-100: #0f0f0f;
+	--font-color-200: #2b2b2b;
+	--font-color-300: #2c2c2c;
+	--font-color-400: #4d4d4d;
+	--accent-color-100: #def71cff;
+	--border-color-100: #0000001a;
+	--border-color-200: #00000080;
+	--grey-100: #f1f0f280;
+	--grey-200: #f5f5f5;
+	--grey-300: #dcdcdc;
+
+	--border-radius-100: 5px;
+	--navbar-height: 6rem;
+}
+
+* {
+	font-family: 'Inter', sans-serif;
+	margin: 0;
+	padding: 0;
+	box-sizing: border-box;
+	text-decoration: none;
+}
+
+::after,
+::before {
+	content: '';
+	position: absolute;
+}
+
+::placeholder {
+	font-size: 14px;
+	color: rgba(0, 0, 0, 0.65);
+}
+
+::selection {
+	background: #141414;
+	color: #ffffffbf;
+}
+
+main {
+	margin-inline: auto;
+	max-width: 1024px;
+	width: 100%;
+}
+
+@media (max-width: 1024px) {
+	main {
+		padding-inline: 1rem;
+	}
+}
+
 html,
 body {
-	@apply h-full overflow-hidden;
+	background-color: var(--background-color-100) !important;
+	color: var(--font-color-100);
+
+	section {
+		width: 100%;
+	}
+
+	a {
+		color: var(--font-color-100);
+	}
+
+	abbr {
+		text-decoration: none;
+	}
+
+	abbr::after {
+		content: none;
+	}
+
+	h2 {
+		color: var(--font-color-200);
+		font-size: 2.5rem;
+		font-weight: 500;
+		margin-block-end: 2rem;
+	}
+
+	h3 {
+		color: var(--font-color-300);
+		font-size: 1.5rem;
+		font-weight: 500;
+	}
+
+	h4 {
+		color: var(--font-color-400);
+		font-weight: 500;
+		font-size: 1.125rem;
+		letter-spacing: -0.005em;
+		line-height: 1.5;
+	}
+
+	.link {
+		border-radius: var(--border-radius-100);
+		display: inline-flex;
+		justify-content: center;
+		align-items: center;
+		gap: 0.3rem;
+		font-weight: 500;
+		padding: 0.5rem 2rem;
+	}
+
+	.link-color {
+		background-color: var(--accent-color-100);
+
+		&:hover {
+			background: rgba(222, 247, 28, 0.52);
+		}
+	}
+
+	.link-plain {
+		background-color: var(--grey-200);
+
+		&:hover {
+			background: rgba(235, 234, 234, 1);
+		}
+	}
 }
diff --git a/src/lib/assets/images/alesana-profile.jpeg b/src/lib/assets/images/alesana-profile.jpeg
deleted file mode 100644
index befd037..0000000
Binary files a/src/lib/assets/images/alesana-profile.jpeg and /dev/null differ
diff --git a/src/lib/assets/images/alesana-profile.png b/src/lib/assets/images/alesana-profile.png
new file mode 100644
index 0000000..b5896b3
Binary files /dev/null and b/src/lib/assets/images/alesana-profile.png differ
diff --git a/src/lib/assets/projects-images/project-sso-sitadb.png b/src/lib/assets/projects-images/project-sso-sitadb.png
index 7dba347..6f61ab4 100644
Binary files a/src/lib/assets/projects-images/project-sso-sitadb.png and b/src/lib/assets/projects-images/project-sso-sitadb.png differ
diff --git a/src/lib/assets/projects-images/project-sso-website.png b/src/lib/assets/projects-images/project-sso-website.png
index 6f393ec..4a0a493 100644
Binary files a/src/lib/assets/projects-images/project-sso-website.png and b/src/lib/assets/projects-images/project-sso-website.png differ
diff --git a/src/lib/components/About.svelte b/src/lib/components/About.svelte
index fde3f5c..0dc5f3d 100644
--- a/src/lib/components/About.svelte
+++ b/src/lib/components/About.svelte
@@ -1,87 +1,47 @@
 <script>
 	import { Section } from '$lib/utils';
-	import {
-		Timeline,
-		TimelineItem,
-		TimelineSeparator,
-		TimelineDot,
-		TimelineConnector,
-		TimelineContent,
-		TimelineOppositeContent
-	} from 'svelte-vertical-timeline';
-	const options = [
-		{
-			title: 'Launched SCH Facebook Group',
-			time: 'August 2021',
-			description:
-				'Created SCH Facebook group as a central hub for information sharing within our community.',
-			url: 'https://www.youtube.com/watch?v=dQw4w9WgXcQ'
-		},
-		{
-			title: 'Created SCH Discord Channel',
-			time: 'September 2021',
-			description:
-				'Started a Discord Channel facilitating streamlined communication and collaboration for SCH members.',
-			url: 'https://www.youtube.com/watch?v=dQw4w9WgXcQ'
-		},
-		{
-			title: 'Completed SITA Membership Database Project',
-			time: 'August 2023',
-			description: 'Successfully wrapped up the SITA membership database project.',
-			url: 'https://www.youtube.com/watch?v=dQw4w9WgXcQ'
-		},
-		{
-			title: 'Launched SCH Website',
-			time: 'May 2024',
-			description:
-				'Unveiled the official SCH Website, streamlining user access and enhancing information sharing within.',
-			url: 'https://www.youtube.com/watch?v=dQw4w9WgXcQ'
-		}
-	];
-</script>
+	import { Contributors } from '$lib/utils/contributors';
+	import { IconUsers } from '@tabler/icons-svelte';
 
-<div id={Section.About} class="container w-full py-12 mx-auto bg-transparent">
-	<h1 class="text-4xl font-bold text-center">Samoa Code Hub - Our Journey in Code</h1>
-	<Timeline
-		position="alternate"
-		style={'padding: 50px 0; max-width: 1024px; width: 100%; margin: 0 auto'}
-	>
-		{#each options as option}
-			<TimelineItem>
-				<TimelineOppositeContent slot="opposite-content">
-					<p>{option.time}</p>
-				</TimelineOppositeContent>
-				<TimelineSeparator>
-					<TimelineDot style={'background-color: #7CD5E2;'} />
-					<TimelineConnector />
-				</TimelineSeparator>
-				<TimelineContent style={'padding-bottom: 50px;'}>
-					<h3>
-						<a href={option.url} title="Go to Homepage" class="hover:underline">
-							{option.title}
-						</a>
-					</h3>
+	// contributors array for the images
+	const team = [Contributors[0], Contributors[5], Contributors[9]];
 
-					<p class="text-[#5d5c5c] dark:text-[#cecece]">{option.description}</p>
-				</TimelineContent>
-			</TimelineItem>
-		{/each}
-	</Timeline>
-</div>
+	// offsets for left calc; adjust px values to taste
+	const offsets = ['- 80px', '', '+ 80px'];
+</script>
 
-<style>
-	/* .container{
-		background: #13344C
-	} */
-	h3 {
-		letter-spacing: 1.5px;
-		margin-bottom: 8px;
-		font-size: 18px;
-		font-weight: 600;
-	}
+<div
+	id={Section.About}
+	class="py-[clamp(3.125rem,8.3vw,7.5rem)] border-y-2 border-[var(--border-color-100)] w-full"
+>
+	<h2>About Us</h2>
+	<div class="flex max-[768px]:flex-col">
+		<!-- LEFT BOX -->
+		<div class="w-1/2 max-[768px]:w-full">
+			<p class="about-p max-[450px]:text-justify">
+				Samoa Code Hub started in 2022 with a simple idea — bring Samoan developers together to
+				learn, build, and grow. We’re a community-driven space where creativity meets collaboration.
+				From open-source projects to mentorship and local meetups, we connect developers and help to
+				grow Samoa’s tech scene — if you’re curious who’s behind it all, meet the team making it
+				happen.
+			</p>
+			<a href="/contributors" class="link link-color mt-[2.25rem]">
+				Meet the team <IconUsers size="20" />
+			</a>
+		</div>
 
-	p {
-		letter-spacing: 1.5px;
-		font-size: 14px;
-	}
-</style>
+		<!-- RIGHT BOX -->
+		<div class="w-1/2 max-[768px]:w-full relative h-[150px] max-[768px]:mt-[4.25rem]">
+			{#each team as { avatar, name }, i}
+				<img
+					src={avatar}
+					alt={name}
+					title={name}
+					class="absolute top-0 left-1/2 -translate-x-1/2 h-full aspect-square
+          rounded-full object-cover border-[7px] border-[var(--background-color-200)] grayscale"
+					style={`left: calc(50% ${offsets[i] || ''}); z-index: ${team.length - i};`}
+				/>
+			{/each}
+		</div>
+	</div>
+</div>
diff --git a/src/lib/components/Appbar.svelte b/src/lib/components/Appbar.svelte
index 4467a7a..9ce4dd5 100644
--- a/src/lib/components/Appbar.svelte
+++ b/src/lib/components/Appbar.svelte
@@ -1,78 +1,37 @@
 <script>
-	import { AppBar, Avatar, LightSwitch } from '@skeletonlabs/skeleton';
-	import { IconBrandGithubFilled, IconMenu2 } from '@tabler/icons-svelte';
-	import { menuItems } from '$lib/utils/';
-	import { scrollToTop } from '$lib/utils/';
-
+	import { Avatar } from '@skeletonlabs/skeleton';
+	import { IconMenuDeep, IconX } from '@tabler/icons-svelte';
+	import { menuItems, Section } from '$lib/utils/';
+	import { goToSection } from '$lib/utils/navigation';
+	import { toggleSidebarState, toggleSidebar } from '$lib/utils/sidebarLogic';
 	import logo from '../assets/sch-logo/SAMOACode_1.png';
-
-	export let toggleSidebar = false;
-
-	function scrollIntoView({ target }) {
-		const el = document.querySelector(target.getAttribute('href'));
-		if (!el) return;
-		el.scrollIntoView({
-			behavior: 'smooth'
-		});
-		const rect = el.getBoundingClientRect();
-
-		// Check if the element's top is within the visible viewport
-		if (rect.top < window.innerHeight) {
-			el.scrollIntoView({
-				behavior: 'smooth'
-			});
-		}
-	}
 </script>
 
-<AppBar shadow="shadow-lg" slotTrail="!space-x-2">
-	<svelte:fragment slot="lead">
-		<div class="flex items-center space-x-4">
-			<!-- Hamburger Menu -->
-			<button
-				class="btn-icon btn-icon-sm lg:hidden"
-				on:click={() => (toggleSidebar = !toggleSidebar)}
-			>
-				<IconMenu2 />
-			</button>
-			<!-- Logo -->
-			<a
-				href="/"
-				on:click|preventDefault={() => {
-					if (toggleSidebar) toggleSidebar = false;
-					scrollToTop();
-				}}
-			>
-				<Avatar class="block w-8 h-8 lg:w-16 lg:h-16" src={logo} rounded="rounded" />
-			</a>
-		</div>
-	</svelte:fragment>
-	<svelte:fragment slot="trail">
-		{#each menuItems as item}
-			<nav class="relative hidden lg:block">
+<nav
+	class="fixed left-0 top-0 w-full h-[var(--navbar-height)] bg-[var(--background-color-100)]
+            backdrop-blur-[2rem] flex justify-between items-center px-8 z-[1000]"
+>
+	<a href="/" on:click|preventDefault={() => goToSection(Section.Hero)}>
+		<Avatar class="block w-8 h-8" src={logo} rounded="rounded" />
+	</a>
+	<ul class="mx-auto flex max-[768px]:hidden">
+		<li>
+			{#each menuItems as item}
 				<a
-					href={item.ref}
-					class="btn hover:variant-soft-primary"
-					on:click|preventDefault={scrollIntoView}
+					href="/"
+					on:click|preventDefault={() => goToSection(item.ref.replace('#', ''))}
+					class="py-[0.65rem] px-8 rounded-[var(--border-radius-100)] hover:bg-[var(--grey-200)]"
 				>
 					{item.name}
 				</a>
-			</nav>
-		{/each}
-
-		<div class="relative block">
-			<LightSwitch />
-		</div>
-
-		<section class="px-5 space-x-1">
-			<a
-				class="btn-icon hover:variant-soft-primary"
-				href="https://github.com/SamoaCodeHub"
-				target="_blank"
-				rel="noreferrer"
-			>
-				<IconBrandGithubFilled />
-			</a>
-		</section>
-	</svelte:fragment>
-</AppBar>
+			{/each}
+		</li>
+	</ul>
+	<button class="md:hidden" on:click={toggleSidebarState} data-sidebar-toggle data-no-close>
+		{#if $toggleSidebar}
+			<IconX />
+		{:else}
+			<IconMenuDeep />
+		{/if}
+	</button>
+</nav>
diff --git a/src/lib/components/BackToTop.svelte b/src/lib/components/BackToTop.svelte
deleted file mode 100644
index e963cce..0000000
--- a/src/lib/components/BackToTop.svelte
+++ /dev/null
@@ -1,24 +0,0 @@
-<script>
-	import { scrollToTop } from '$lib/utils/';
-</script>
-
-<button
-	class="!fixed bottom-4 right-8 rounded-full bg-sky-600 dark:bg-sky-300 p-3 text-xs font-medium uppercase leading-tight dark:text-sky-950 text-white shadow-md transition duration-150 ease-in-out hover:bg-sky-950 hover:shadow-lg focus:bg-sky-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-sky-800 active:shadow-lg"
-	on:click={scrollToTop}
-	id="bacToTop"
->
-	<svg
-		aria-hidden="true"
-		focusable="false"
-		data-prefix="fas"
-		class="h-4 w-4"
-		role="img"
-		xmlns="http://www.w3.org/2000/svg"
-		viewBox="0 0 448 512"
-	>
-		<path
-			fill="currentColor"
-			d="M34.9 289.5l-22.2-22.2c-9.4-9.4-9.4-24.6 0-33.9L207 39c9.4-9.4 24.6-9.4 33.9 0l194.3 194.3c9.4 9.4 9.4 24.6 0 33.9L413 289.4c-9.5 9.5-25 9.3-34.3-.4L264 168.6V456c0 13.3-10.7 24-24 24h-32c-13.3 0-24-10.7-24-24V168.6L69.2 289.1c-9.3 9.8-24.8 10-34.3.4z"
-		/>
-	</svg>
-</button>
diff --git a/src/lib/components/ClickToCopy.svelte b/src/lib/components/ClickToCopy.svelte
new file mode 100644
index 0000000..bf050a4
--- /dev/null
+++ b/src/lib/components/ClickToCopy.svelte
@@ -0,0 +1,29 @@
+<script>
+	import { getToastStore } from '@skeletonlabs/skeleton';
+
+	export let text = '';
+	export let classes = '';
+
+	const toast = getToastStore();
+
+	function triggerToast(message, type = 'success') {
+		toast.trigger({
+			message,
+			background: type === 'error' ? 'variant-filled-error' : 'variant-filled-success',
+			timeout: 2500
+		});
+	}
+
+	async function copy() {
+		try {
+			await navigator.clipboard.writeText(text);
+			triggerToast('Copied to clipboard!');
+		} catch (err) {
+			triggerToast('Could not copy text', 'error');
+		}
+	}
+</script>
+
+<button class={classes} on:click={copy}>
+	<slot />
+</button>
diff --git a/src/lib/components/Contact.svelte b/src/lib/components/Contact.svelte
index 6894406..aa897b5 100644
--- a/src/lib/components/Contact.svelte
+++ b/src/lib/components/Contact.svelte
@@ -1,7 +1,11 @@
 <script>
 	import { Section } from '$lib/utils';
 	import { getToastStore } from '@skeletonlabs/skeleton';
-	import { IconMailFilled, IconMapPinFilled } from '@tabler/icons-svelte';
+	import { IconMail, IconMapPin, IconSend } from '@tabler/icons-svelte';
+	import { validateEmail, triggerToast } from '$lib/utils/form';
+	import { submitContactForm } from '$lib/service/contactService';
+	import { socialItems } from '$lib/utils/socialLinks';
+	import ClickToCopy from '$lib/components/ClickToCopy.svelte';
 
 	const env = import.meta.env.VITE_ENV ?? 'development';
 	const formSpree = import.meta.env.VITE_FORMSPREE ?? '#';
@@ -22,96 +26,55 @@
 		message = '';
 	}
 
-	function validateEmail(email) {
-		const re = /\S+@\S+\.\S+/;
-		return re.test(email);
-	}
-
-	function triggerToast(message, type = 'success') {
-		let background;
-		switch (type) {
-			case 'success':
-				background = 'variant-filled-success';
-				break;
-			case 'error':
-				background = 'variant-filled-error';
-				break;
-			default:
-				background = 'variant-filled-success';
-		}
-		const t = {
-			message,
-			background,
-			timeout: 2500
-		};
-		toast.trigger(t);
-	}
-
-	async function handleSubmit(_event) {
+	async function handleSubmit() {
+		// Dev mode skip
 		if (env === 'development') {
-			triggerToast('Thanks for your submission!', 'success');
+			triggerToast(toast, 'Thanks for your submission!');
 			clearForm();
 			return;
 		}
+
 		try {
 			if (!validateEmail(email)) {
-				triggerToast('Please enter a valid email address', 'error');
+				triggerToast(toast, 'Please enter a valid email address', 'error');
 				return;
 			}
-			window.grecaptcha = window.grecaptcha || {};
 
-			const recaptchaResponse = window.document.getElementById('recaptchaResponse').value;
-			if (!recaptchaResponse) {
-				triggerToast('Please complete the ReCAPTCHA', 'error');
+			const recaptchaToken = document.getElementById('recaptchaResponse')?.value;
+
+			if (!recaptchaToken) {
+				triggerToast(toast, 'Please complete the ReCAPTCHA', 'error');
 				return;
 			}
-			const response = await fetch(formSpree, {
-				method: 'POST',
-				body: JSON.stringify({
-					firstname,
-					lastname,
-					email,
-					phone,
-					message,
-					'g-recaptcha-response': recaptchaResponse
-				}),
-				headers: {
-					Accept: 'application/json'
-				}
+
+			await submitContactForm(formSpree, {
+				firstname,
+				lastname,
+				email,
+				phone,
+				message,
+				'g-recaptcha-response': recaptchaToken
 			});
-			if (response.ok) {
-				triggerToast('Thanks for your submission!', 'success');
-				clearForm();
-			} else {
-				const data = await response.json();
-				if (Object.hasOwn(data, 'errors')) {
-					const errorMessages = data['errors'].map((error) => error['message']).join(', ');
-					triggerToast(errorMessages, 'error');
-				} else {
-					triggerToast('Oops! There was a problem submitting your form', 'error');
-				}
-			}
-		} catch (error) {
-			triggerToast('Oops! There was a problem submitting your form', 'error');
+
+			triggerToast(toast, 'Thanks for your submission!');
+			clearForm();
+		} catch (err) {
+			triggerToast(toast, err.message || 'Oops! There was a problem submitting your form', 'error');
 		} finally {
-			if (window.grecaptcha) {
-				window.grecaptcha.reset();
-			}
+			window.grecaptcha?.reset?.();
 		}
 	}
 
-	//copy-to-clipboard function for email adress
-	function copyEmailToClipboard() {
-		const email = document.querySelector('.sch-email').textContent;
-		navigator.clipboard
-			.writeText(email)
-			.then(() => {
-				triggerToast('Email copied to clipboard!', 'success');
-			})
-			.catch((error) => {
-				triggerToast('Error copying email to clipboard', 'error');
-			});
-	}
+	// social media buttons specs
+	let iconSize = 18;
+
+	const colors = ['bg-[#222222]', 'bg-[#8a75ff]', 'bg-[#1877f2]'];
+
+	const hoverColors = [
+		'group-hover:bg-[#555555]',
+		'group-hover:bg-[#9f8efa]',
+		'group-hover:bg-[#5da2fc]'
+	];
 </script>
 
 <svelte:head>
@@ -124,143 +87,157 @@
 		</script>
 	{/if}
 </svelte:head>
-<section id={Section.Contact} class="px-3 py-5 rounded-none lg:py-10 lg:px-5">
-	<div class="grid justify-center gap-4 p-10">
-		<h1 class="font-bold text-center h1">Contact Us</h1>
-		<h3 class="text-[#5d5c5c] dark:text-[#cecece]">
-			Any questions or remarks? Just write us a message!
-		</h3>
-	</div>
-	<div
-		class="p-0 w-auto gap-4 mx-auto border-transparent rounded-md lg:w-3/5 opacity-95 bg-slate-100 md:flex md:grid-cols-2"
-	>
-		<div class="p-6 text-white rounded-t-md text-wrap sm:rounded-md bg-surface-600 lg:w-1/3">
-			<header class="font-medium card-header h3 p-0">Contact Information</header>
-			<section class="grid gap-5 mt-8 lg:mt-10 lg:gap-7">
-				<div class="flex items-start justify-start gap-3">
-					<IconMailFilled />
-					<abbr title="click to copy">
-						<button class="sch-email" on:click={() => copyEmailToClipboard()}>
-							samoastackoverflow@gmail.com
-						</button>
-					</abbr>
-				</div>
-				<div class="flex items-start justify-start gap-3">
-					<IconMapPinFilled />
-					<span>Apia, Samoa</span>
-				</div>
-				<div></div>
-			</section>
-		</div>
-		<form
-			action={formSpree}
-			on:submit|preventDefault={handleSubmit}
-			class="grid w-full mx-auto lg:p-5"
-			method="POST"
-		>
-			<div class="grid w-full gap-6 p-3 text-black md:p-5 md:grid-cols-2">
-				<label class="text-sm label">
-					<span>First Name</span>
-					<input
-						class="text-sm input variant-form-material"
-						type="text"
-						name="firstName"
-						placeholder="Enter first name"
-						bind:value={firstname}
-						required
-					/>
-				</label>
-
-				<label class="text-sm label">
-					<span>Last Name</span>
-					<input
-						class="text-sm input variant-form-material"
-						type="text"
-						name="lastName"
-						placeholder="Enter last name"
-						bind:value={lastname}
-						required
-					/>
-				</label>
 
-				<label class="text-sm label">
-					<span>Email</span>
-					<input
-						class="text-sm input variant-form-material"
-						type="email"
-						name="email"
-						placeholder="Enter email address"
-						bind:value={email}
-						required
-					/>
-				</label>
-
-				<label class="text-sm label">
-					<div class="flex gap-2">
-						<span>Phone </span>
-						<span class="text-gray-400">(Optional)</span>
-					</div>
-					<input
-						class="text-sm input variant-form-material"
-						type="text"
-						name="phone"
-						placeholder="Enter phone number"
-						bind:value={phone}
-					/>
-				</label>
-			</div>
-			<label class="p-5 text-sm text-black lg:mt-4 label">
-				<span>Message</span>
+<section id={Section.Contact} class="py-[clamp(3.125rem,8.3vw,7.5rem)]">
+	<h2>Contact Us</h2>
+	<div class="contact-container flex gap-8 flex-col md:flex-row">
+		<!-- First box -->
+		<div
+			class="w-full md:w-[60%] px-6 py-8 bg-[var(--grey-100)] rounded-[var(--border-radius-100)] flex flex-col"
+		>
+			<h4>Any questions or remarks? Just write us a message!</h4>
+			<form
+				action={formSpree}
+				on:submit|preventDefault={handleSubmit}
+				class="input-container grid grid-cols-1 gap-y-6 gap-x-0 mt-8 sm:grid-cols-2 sm:gap-x-8 sm:gap-y-0 auto-rows-auto"
+				method="POST"
+			>
+				<input
+					type="text"
+					class="row-start-1 row-end-2 col-start-1 col-end-2 border-0 border-b-2 border-[var(--border-color-100)]
+		  		 bg-[var(--background-color-100)] p-2 rounded-[var(--border-radius-100)] focus:border-0"
+					name="name"
+					placeholder="Enter your name"
+					bind:value={firstname}
+					required
+				/>
+				<input
+					type="email"
+					class="row-start-1 row-end-2 col-start-2 col-end-3 border-0 border-b-2 border-[var(--border-color-100)]
+		  		 bg-[var(--background-color-100)] p-2 rounded-[var(--border-radius-100)] focus:border-0"
+					name="email"
+					placeholder="Enter your email-address"
+					bind:value={email}
+					required
+				/>
 				<textarea
-					class="text-sm textarea variant-form-material"
-					rows="4"
-					placeholder="Write your message."
+					placeholder="Enter your message"
+					class="border-0 border-b-2 border-[var(--border-color-100)] bg-[var(--background-color-100)] p-2
+		  		 rounded-[var(--border-radius-100)] focus:border-0 resize-none mt-8 max-[620px]:mt-0 col-span-2 row-span-2"
 					name="message"
+					rows="8"
 					bind:value={message}
 					required
 				/>
-			</label>
-			{#if recaptchaSiteKey && env !== 'development'}
-				<div
-					class="g-recaptcha"
-					data-sitekey={recaptchaSiteKey}
-					data-callback="recaptchaCallback"
-				></div>
-				<input id="recaptchaResponse" name="recaptchaResponse" type="hidden" />
-			{/if}
-			<button
-				type="submit"
-				class="mx-2 mt-2 mb-6 px-12 text-white bg-blue-500 rounded-xl md:justify-self-center btn"
+				{#if recaptchaSiteKey && env !== 'development'}
+					<div
+						data-sitekey={recaptchaSiteKey}
+						data-callback="recaptchaCallback"
+						class="g-recaptcha col-span-2 row-start-4 row-end-5 w-max justify-self-center mt-4"
+					></div>
+					<input id="recaptchaResponse" name="recaptchaResponse" type="hidden" />
+				{/if}
+				<button
+					type="submit"
+					class="submit link link-color col-span-2 row-start-5 row-end-6 mt-8 mx-auto"
+				>
+					Send Message
+					<IconSend size="20" />
+				</button>
+			</form>
+			<p class="text-[12px] mx-auto mt-4 text-black/55">Your data is safe with us.</p>
+		</div>
+
+		<!-- Second box -->
+		<div
+			class="flex flex-col sm:flex-row md:flex-col px-6 py-8 bg-[var(--grey-100)] rounded-[var(--border-radius-100)] md:w-[40%]"
+		>
+			<div
+				class="pb-[2.75rem] border-b-2 border-[var(--border-color-100)] max-[768px]:pr-8 max-[768px]:border-r-2 max-[768px]:border-b-0
+            max-[550px]:pr-0 max-[640px]:border-b-2 max-[640px]:border-r-0"
 			>
-				Send message
-			</button>
-		</form>
+				<h4 class="mb-[1.75rem]">Contact Information</h4>
+				<div class="w-max flex justify-center items-center">
+					<span
+						class="bg-[var(--grey-300)] h-[30px] aspect-square rounded-[var(--border-radius-100)] flex items-center justify-center
+            		   transition-all duration-100 ease-in mr-[0.65rem]"
+					>
+						<IconMapPin size="19" />
+					</span>
+					<p>Apia, Samoa</p>
+				</div>
+				<abbr title="Click to copy email adress">
+					<ClickToCopy text="samoastackoverflow@gmail.com" classes="email-button">
+						<span
+							class="email-icon h-[30px] aspect-square rounded-[var(--border-radius-100)] flex items-center justify-center
+            			 transition-all duration-100 ease-in mr-[0.65rem] text-[var(--font-color-100)] bg-[rgb(252,187,66)]"
+						>
+							<IconMail size="18" />
+						</span>
+						samoastackoverflow@gmail.com
+					</ClickToCopy>
+				</abbr>
+			</div>
+
+			<div
+				class="mt-[2.75rem] max-[768px]:pl-8 max-[768px]:mt-0 max-[640px]:pl-0 max-[640px]:mt-[2.75rem]"
+			>
+				<h4 class="mb-[1.75rem]">Find us also on:</h4>
+				<ul>
+					{#each socialItems as item, i}
+						<li class={i === 1 ? 'my-[1.25rem]' : ''}>
+							<a
+								href={item.link}
+								target="_blank"
+								title={item.title}
+								class="w-max flex justify-center items-center group"
+							>
+								<span
+									class="text-white {colors[i]} {hoverColors[
+										i
+									]} transition-colors h-[30px] aspect-square rounded-[var(--border-radius-100)]
+            				 flex items-center justify-center duration-100 ease-in mr-[0.65rem]"
+								>
+									<svelte:component this={item.icon} size={iconSize} />
+								</span>
+								{item.name}
+							</a>
+						</li>
+					{/each}
+				</ul>
+			</div>
+		</div>
 	</div>
 </section>
 
 <style>
-	.sch-email {
-		word-break: break-word;
-		text-align: start;
-		cursor: pointer;
+	@media (max-width: 620px) {
+		/* forcefully reset positioning */
+		.input-container input:nth-child(1),
+		.input-container input:nth-child(2),
+		.input-container textarea,
+		.input-container .g-recaptcha,
+		.input-container .submit {
+			grid-column: 1 / -1 !important;
+			grid-row: auto !important;
+		}
 	}
 
-	.g-recaptcha {
-		padding-left: 0.75rem;
+	:global(.email-button) {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		font-size: clamp(0.875rem, 0.7188rem + 0.5vw, 1rem);
+		margin-top: 1.25rem;
 	}
 
-	textarea {
-		resize: none;
+	@media (max-width: 1024px) {
+		:global(.email-button) {
+			word-break: break-all;
+		}
 	}
 
-	.rounded-t-md {
-		border-top-left-radius: 0.375rem;
-		border-top-right-radius: 0rem;
-		border-bottom-right-radius: 0rem;
-
-		@media (max-width: 768px) {
-			border-top-right-radius: 0.375rem;
-			border-bottom-left-radius: 0rem;
-		}
+	:global(.email-button:hover .email-icon) {
+		background: hsl(39, 97%, 70%);
 	}
 </style>
diff --git a/src/lib/components/Contributors.svelte b/src/lib/components/Contributors.svelte
index 92d249d..d725d9a 100644
--- a/src/lib/components/Contributors.svelte
+++ b/src/lib/components/Contributors.svelte
@@ -1,247 +1,203 @@
 <script>
-	import Andre from '../assets/images/andre-profile.jpeg';
-	import Alesana from '../assets/images/alesana-profile.jpeg';
-	import Eugene from '../assets/images/eugene-profile.jpeg';
-	import Ronaldo from '../assets/images/ronaldo-profile.jpeg';
-	import Chen from '../assets/images/chen-profile.jpeg';
-	import Antonio from '../assets/images/antonio-profile.jpeg';
-	import Aaron from '../assets/images/aaron-profile.jpeg';
-	import Junior from '../assets/images/junior-profile.jpeg';
-	import Tausani from '../assets/images/tausani-profile.jpeg';
-	import Ainsof from '../assets/images/ainsof-profile.jpeg';
-	import Hilton from '../assets/images/hilton-profile.jpeg';
-	import Kendrick from '../assets/images/kendrick-profile.jpeg';
-	import Henry from '../assets/images/henry-profile.jpg';
 	import { Section } from '$lib/utils';
-	import emblaCarouselSvelte from 'embla-carousel-svelte';
+	import { IconArrowUpRight, IconBrandGithub, IconBrandLinkedin } from '@tabler/icons-svelte';
+	import { Contributors } from '$lib/utils/contributors';
+	import { joinUs } from '$lib/utils/socialLinks';
+	import EmblaCarousel from '$lib/components/EmblaCarousel.svelte';
 
-	const team = [
-		{
-			avatar: Andre,
-			name: 'Andre Westerlund',
-			title: 'Founder & Senior Full Stack Developer',
-			github: 'https://github.com/westerandr',
-			linkedin: 'https://www.linkedin.com/in/andrewesterlund/'
-		},
-		{
-			avatar: Alesana,
-			name: 'Alesana Eteuati Jr',
-			title: 'Senior Software Developer',
-			github: 'https://github.com/Green-Ranger11',
-			linkedin: 'https://www.linkedin.com/in/alesana-eteuati-jr/'
-		},
-		{
-			avatar: Eugene,
-			name: 'Eugene Barker',
-			title: 'Solutions Architect',
-			github: 'https://github.com/genebarker',
-			linkedin: 'https://www.linkedin.com/in/eugenebarker/'
-		},
-		{
-			avatar: Chen,
-			name: 'Chia Chen Lin',
-			title: 'Software Developer',
-			github: 'https://github.com/shifu-lin',
-			linkedin: 'https://www.linkedin.com/in/chia-chen-lin-8625251b9/'
-		},
-		{
-			avatar: Junior,
-			name: 'Junior Latu',
-			title: 'Software Developer',
-			github: 'https://github.com/jrlatu',
-			linkedin: 'https://www.linkedin.com/in/talavou-junior-latu/'
-		},
-		{
-			avatar: Ronaldo,
-			name: 'Ronaldo Pose',
-			title: 'Business Solutions Manager',
-			github: 'https://github.com/renaldox',
-			linkedin: 'https://www.linkedin.com/in/ronaldo-pose/'
-		},
-		{
-			avatar: Aaron,
-			name: 'Aaron Solofa',
-			title: 'GIS Specialist',
-			github: 'https://github.com/aaronjamessolofa',
-			linkedin: 'https://www.linkedin.com/in/aaron-solofa-06b923123/'
-		},
-		{
-			avatar: Kendrick,
-			name: 'Kendrick Lui',
-			title: 'Web Developer',
-			github: 'https://github.com/Ken2523',
-			linkedin: 'https://www.linkedin.com/in/ken-lui-15017a232/'
-		},
-		{
-			avatar: Antonio,
-			name: 'Antonio Chadwick',
-			title: 'IT Engineer',
-			github: 'https://github.com/antoniochadwick',
-			linkedin: 'https://www.linkedin.com/in/antonio-chadwick-8ab853141'
-		},
-		{
-			avatar: Tausani,
-			name: 'Tausani Ah Chong',
-			title: 'Software Engineer',
-			github: 'https://github.com/tausani-ah-chong',
-			linkedin: 'https://www.linkedin.com/in/tausaniahchong'
-		},
-		{
-			avatar: Ainsof,
-			name: "Ainsof So'o",
-			title: 'Systems Developer & Analyst',
-			github: 'https://github.com/ainsofs',
-			linkedin: 'https://www.linkedin.com/in/ainsofs'
-		},
-		{
-			avatar: Hilton,
-			name: "Hilton So'o",
-			title: 'Managing Director',
-			github: 'https://github.com/encode685',
-			linkedin: 'https://www.linkedin.com/in/hilton-samuelu-so-o-8711aa103'
-		},
-		{
-			avatar: Henry,
-			name: 'Henry Fuerst',
-			title: 'Frontend Developer',
-			github: 'https://github.com/5thAttemptCode',
-			linkedin: 'https://www.linkedin.com/in/henry-fuerst-10b58a187/'
-		}
-	];
+	// social media icon specs
+	let iconSize = 22;
+	let iconColor = '#ffffff';
+	let iconStroke = 1.75;
 </script>
 
-<section id={Section.Contributors} class="container mx-auto px-12 lg:pb-24">
-	<div class="max-w-screen-sm mx-auto mb-8 text-center lg:mb-16">
-		<h1 class="pt-5 mb-4 text-4xl font-bold tracking-tight">Meet our Seki Devs</h1>
-		<h3 class="text-[#5d5c5c] dark:text-[#cecece]">
-			Tama Samoa who are working to build a community of SoftwareDevs on our island.
-		</h3>
-	</div>
-	<div class="grid grid-cols-1 gap-10 mb-5 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3 px-5">
-		{#each team as { avatar, name, title, github, linkedin }}
+<section id={Section.Contributors} class="team-section py-32 overflow-hidden">
+	<h2>Meet our Seki Devs</h2>
+	<p class="max-w-[500px] w-full mb-9 [@media(max-width:450px)]:text-justify">
+		Tama Samoa who are building a vibrant community of software developers right here on our island.
+		At our meet-ups, we share ideas, explore the latest tech trends, and swap stories from the world
+		of code. Think you’ve got something to bring to the table? We’d love to have you on board, join
+		us right
+		<a
+			href={joinUs.link}
+			target="_blank"
+			class="inline p-0 m-0 underline font-semibold"
+			title={joinUs.title}>here.</a
+		>
+	</p>
+	<div
+		class="card-container hidden md:grid bg-[var(--grey-100)] grid-cols-[repeat(3,_minmax(234px,_270px))] justify-center
+              gap-[3.55rem] max-[900px]:gap-6 py-[3.65rem] rounded-[var(--border-radius-100)]"
+	>
+		{#each Contributors as teamMember}
 			<div
-				class="flex flex-col items-center justify-center w-full mx-auto mt-5 card card-hover sm:w-80 sm:h-80"
+				class="card-contributor relative flex flex-col flex-[0_0_100%] h-[320px] overflow-hidden rounded-[var(--border-radius-100)]"
 			>
-				<img class="w-40 h-40 rounded-full object-cover" src={avatar} loading="lazy" alt="Avatar" />
-				<h5 class="pt-5 text-xl font-semibold">{name}</h5>
-				<span class="pt-2 text-sm text-wrap text-[#5d5c5c] dark:text-[#cecece]">{title}</span>
-				<div class="flex flex-row pt-6 icon-container">
-					<a
-						href={linkedin}
-						target="_blank"
-						class="rounded bg-blue-500 hover:bg-blue-600 text-white"
-					>
-						LinkedIn
-					</a>
-					<a
-						href={github}
-						target="_blank"
-						class="rounded bg-[#949494] hover:bg-[#818181] text-white"
+				<img
+					src={teamMember.avatar}
+					loading="lazy"
+					alt={teamMember.name}
+					title={teamMember.name}
+					class="absolute top-[30px] left-[25px] h-full w-full object-cover filter grayscale scale-[1.2] z-0"
+				/>
+				<span
+					class="detail absolute z-[2] bottom-4 left-4 rounded-[20px] transition-all duration-200 ease-in-out
+                     text-[var(--accent-color-100)] flex justify-center items-center"
+				>
+					details <IconArrowUpRight size="20" />
+				</span>
+				<div
+					class="contributor-info transition-all duration-300 ease-in-out h-full w-full content-end z-[2] p-4 relative"
+				>
+					<h3 class="font-extrabold text-white mb-2 leading-none text-[1.3rem]">
+						{teamMember.name}
+					</h3>
+					<p class="text-[#f2f2f2] font-medium italic transition-all duration-200 ease-in-out mb-1">
+						{teamMember.title}
+					</p>
+					<div
+						class="social-links-container w-max flex justify-start items-start gap-4 transition-all duration-200
+                      ease-in-out opacity-0 pointer-events-none translate-y-[150%]"
 					>
-						Github
-					</a>
+						<abbr title={`${teamMember.name.trim().split(/\s+/)[0]}'s LinkedIn`}>
+							<a
+								href={teamMember.linkedin}
+								target="_blank"
+								class="h-[35px] aspect-square rounded-[var(--border-radius-100)] flex justify-center items-center
+                        transition-all duration-100 ease-in-out bg-[#0072b1] hover:bg-[hsl(201,99%,39%)]"
+							>
+								<IconBrandLinkedin size={iconSize} color={iconColor} stroke={iconStroke} />
+							</a>
+						</abbr>
+						<abbr title={`${teamMember.name.trim().split(/\s+/)[0]}'s Github`}>
+							<a
+								href={teamMember.github}
+								target="_blank"
+								class="h-[35px] aspect-square rounded-[var(--border-radius-100)] flex justify-center items-center
+                        transition-all duration-100 ease-in-out bg-[#222222] hover:bg-[#555555]"
+							>
+								<IconBrandGithub size={iconSize} color={iconColor} stroke={iconStroke} />
+							</a>
+						</abbr>
+					</div>
 				</div>
 			</div>
 		{/each}
 	</div>
-	<p class="lg:hidden mx-auto text-[#5d5c5c] dark:text-[#cecece] text-[14px] swipe-p">
-		please swipe
-	</p>
-	<div class="embla" use:emblaCarouselSvelte>
-		<div class="embla__container">
-			{#each team as { avatar, name, title, github, linkedin }}
+
+	<EmblaCarousel>
+		{#each Contributors as teamMember}
+			<button
+				tabindex="0"
+				class="embla__slide flex-[0_0_80%] min-w-0 max-w-[270px] h-[300px] relative overflow-hidden
+                     rounded-[var(--border-radius-100)] text-left"
+			>
+				<img
+					src={teamMember.avatar}
+					loading="lazy"
+					alt={teamMember.name}
+					title={teamMember.name}
+					class="absolute top-[30px] left-[25px] h-full w-full object-cover filter grayscale scale-[1.2] z-0"
+				/>
+				<span
+					class="detail absolute z-[2] bottom-4 left-4 rounded-[20px] transition-all duration-200 ease-in-out
+                     text-[var(--accent-color-100)] flex justify-center items-center"
+				>
+					details <IconArrowUpRight size="20" />
+				</span>
 				<div
-					class="embla__slide flex flex-col items-center justify-center w-full mx-auto mt-5 card sm:w-80 sm:h-80"
+					class="contributor-info transition-all duration-300 ease-in-out h-full w-full content-end z-[2] p-4 relative"
 				>
-					<img
-						class="w-40 h-40 rounded-full object-cover"
-						src={avatar}
-						loading="lazy"
-						alt="Avatar"
-					/>
-					<h5 class="pt-5 text-xl font-semibold">{name}</h5>
-					<span class="pt-2 text-sm text-wrap text-[#5d5c5c] dark:text-[#cecece]">{title}</span>
-					<div class="flex flex-row pt-6 icon-container">
+					<h3 class="font-extrabold text-white mb-2 leading-none text-[1.3rem]">
+						{teamMember.name}
+					</h3>
+					<p class="text-[#f2f2f2] font-medium italic transition-all duration-200 ease-in-out mb-1">
+						{teamMember.title}
+					</p>
+					<div
+						class="social-links-container w-max flex justify-start items-start gap-4 transition-all duration-200 ease-in-out
+                      opacity-0 pointer-events-none translate-y-[150%]"
+					>
 						<a
-							href={linkedin}
+							href={teamMember.linkedin}
 							target="_blank"
-							class="rounded bg-blue-500 hover:bg-blue-600 text-white"
+							class="h-[35px] aspect-square rounded-[var(--border-radius-100)] flex justify-center items-center
+                      transition-all duration-100 ease-in-out bg-[#0072b1]"
 						>
-							LinkedIn
+							<IconBrandLinkedin size={iconSize} color={iconColor} stroke={iconStroke} />
 						</a>
 						<a
-							href={github}
+							href={teamMember.github}
 							target="_blank"
-							class="rounded bg-[#949494] hover:bg-[#818181] text-white"
+							class="h-[35px] aspect-square rounded-[var(--border-radius-100)] flex justify-center items-center
+                      transition-all duration-100 ease-in-out bg-[#222222]"
 						>
-							Github
+							<IconBrandGithub size={iconSize} color={iconColor} stroke={iconStroke} />
 						</a>
 					</div>
 				</div>
-			{/each}
-		</div>
-	</div>
+			</button>
+		{/each}
+	</EmblaCarousel>
 </section>
 
-<style>
-	.container {
-		@media (max-width: 450px) {
-			margin-block: 4rem;
-		}
-	}
-	.icon-container {
-		flex-direction: column;
-		gap: 0.7rem;
-		margin-top: 0.5rem;
-	}
-
-	a {
-		padding: 0.4rem 2.5rem;
-		display: flex;
-		justify-content: center;
-		align-items: center;
+<style lang="postcss">
+	.card-contributor:hover .detail,
+	.embla__slide:active .detail,
+	.embla__slide:focus .detail {
+		opacity: 0;
 	}
 
-	.card {
-		transition: all 0.2s;
-		height: 100%;
-		padding-block: 1rem;
+	.card-contributor:hover .contributor-info p,
+	.embla__slide:active .contributor-info p,
+	.embla__slide:focus .contributor-info p {
+		margin-bottom: 1.25rem;
 	}
 
-	.grid {
-		@media (max-width: 450px) {
-			display: none;
-		}
+	.contributor-info:hover .social-links-container,
+	.contributor-info:active .social-links-container,
+	.contributor-info:focus .social-links-container {
+		opacity: 1;
+		pointer-events: all;
+		transform: translateY(0%);
 	}
 
-	.embla {
-		overflow: hidden;
-		display: none;
-
-		@media (max-width: 450px) {
-			display: block;
-		}
+	.card-contributor::before,
+	.embla__slide::before {
+		top: 0;
+		left: 0;
+		height: 100%;
+		aspect-ratio: 1;
+		background: linear-gradient(205deg, rgb(0, 0, 0, 0.3) 50%, var(--accent-color-100) 100%);
+		z-index: 2;
+		opacity: 0;
+		transition: all 0.3s ease-in-out;
 	}
 
-	.embla__container {
-		display: flex;
-		gap: 2rem;
+	.card-contributor::after,
+	.embla__slide::after {
+		top: 0;
+		left: 0;
+		height: 100%;
+		width: 100%;
+		background: linear-gradient(205deg, transparent 50%, rgb(0, 0, 0, 0.8) 100%);
+		z-index: 1;
+		transition: all 0.3s ease-in-out;
 	}
 
-	.embla__slide {
-		flex: 0 0 100%;
-		min-width: 0;
+	.card-contributor:hover::after,
+	.embla__slide:active::after,
+	.embla__slide:focus::after {
+		opacity: 0;
 	}
 
-	p {
-		max-width: max-content;
+	.card-contributor:hover::before,
+	.embla__slide:active::before,
+	.embla__slide:focus::before {
+		opacity: 1;
 	}
 
-	.swipe-p {
-		display: none;
-		@media (max-width: 450px) {
-			display: block;
-			font-size: 14px;
-		}
+	.card-container:has(.card-contributor:hover) .card-contributor:not(:hover) span {
+		filter: grayscale(100%);
 	}
 </style>
diff --git a/src/lib/components/EmblaCarousel.svelte b/src/lib/components/EmblaCarousel.svelte
new file mode 100644
index 0000000..50b9409
--- /dev/null
+++ b/src/lib/components/EmblaCarousel.svelte
@@ -0,0 +1,38 @@
+<script>
+	import emblaCarouselSvelte from 'embla-carousel-svelte';
+
+	let emblaOptions = {
+		align: 'start',
+		containScroll: 'trimSnaps',
+		slidesToScroll: 1
+	};
+</script>
+
+<div
+	use:emblaCarouselSvelte={emblaOptions}
+	class="embla overflow-hidden hidden w-[calc(100vw-2rem)] relative bg-[var(--grey-100)]
+         py-[1.5rem] max-[768px]:block max-[768px]:px-8"
+>
+	<div class="embla__container flex w-full gap-[1.5rem]">
+		<slot />
+	</div>
+</div>
+
+<style>
+	.embla::after {
+		height: 100%;
+		width: 3rem;
+		top: 0;
+		left: 0;
+		background: linear-gradient(to right, var(--background-color-200), transparent);
+	}
+
+	.embla::before {
+		height: 100%;
+		width: 3rem;
+		top: 0;
+		right: -1px;
+		background: linear-gradient(to right, transparent, var(--background-color-200));
+		z-index: 1;
+	}
+</style>
diff --git a/src/lib/components/Footer.svelte b/src/lib/components/Footer.svelte
index 708a9e9..9be433b 100644
--- a/src/lib/components/Footer.svelte
+++ b/src/lib/components/Footer.svelte
@@ -1,75 +1,34 @@
 <script>
 	import { AppBar } from '@skeletonlabs/skeleton';
-	import { IconBrandDiscord, IconBrandFacebook, IconBrandGithub } from '@tabler/icons-svelte';
+	import { socialItems } from '$lib/utils/socialLinks';
 </script>
 
 <AppBar
 	gridColumns="grid grid-cols-1 sm:grid-cols-1"
 	slotLead="sm:place-self-center place-self-center"
-	shadow="shadow-2xl"
-	slotTrail="sm:place-self-center place-self-center !space-x-2 flex text-sm md:text-base pb-4"
+	slotTrail="sm:place-self-center place-self-center !space-x-2 flex text-sm md:text-base"
+	background="bg-[var(--grey-200)]"
+	padding="py-20"
 >
 	<svelte:fragment slot="lead">
-		<div class="flex items-center space-x-4 mt-4">
-			<a
-				title="Dive into the code"
-				class="hidden btn btn-sm sm:block"
-				href="https://github.com/SamoaCodeHub"
-				target="_blank"
-			>
-				GitHub
-			</a>
-
-			<a
-				target="_blank"
-				href="https://github.com/SamoaCodeHub"
-				class="lg:!ml-0 w-[32px] lg:w-auto overflow-hidden block sm:hidden"
-			>
-				<IconBrandGithub />
-			</a>
-			&nbsp;&nbsp;
-			<a
-				title="Join us on Discord"
-				class="hidden btn btn-sm sm:block"
-				href="https://forms.gle/aoTeV9jF5h7wnqAG6"
-				target="_blank"
-			>
-				Discord
-			</a>
-
-			<a
-				target="_blank"
-				href="https://forms.gle/aoTeV9jF5h7wnqAG6"
-				class="lg:!ml-0 w-[32px] lg:w-auto overflow-hidden block sm:hidden"
-			>
-				<IconBrandDiscord />
-			</a>
-			&nbsp;&nbsp;
-			<a
-				title="Get the latest on Facebook"
-				class="hidden btn btn-sm sm:block"
-				href="https://www.facebook.com/samoacodehub"
-				target="_blank"
-			>
-				Facebook
-			</a>
-
-			<a
-				target="_blank"
-				href="https://www.facebook.com/samoacodehub"
-				class="lg:!ml-0 w-[32px] lg:w-auto overflow-hidden block sm:hidden"
-			>
-				<IconBrandFacebook />
-			</a>
-		</div>
+		<ul class="flex items-center gap-10 mt-4">
+			{#each socialItems as item}
+				<li>
+					<a href={item.link} target="_blank" title={item.title}>
+						<span class="hidden sm:block">
+							{item.name}
+						</span>
+						<span class="block sm:hidden w-[32px] overflow-hidden underline">
+							<svelte:component this={item.icon} />
+						</span>
+					</a>
+				</li>
+			{/each}
+		</ul>
 	</svelte:fragment>
 	<svelte:fragment slot="trail">
-		Copyright © {new Date().getFullYear()} Samoa Code Hub. All Rights Reserved.
+		<span style="font-size:12px; color: rgba(0, 0, 0, 0.65); text-align:center">
+			Copyright © {new Date().getFullYear()} Samoa Code Hub. All Rights Reserved.
+		</span>
 	</svelte:fragment>
 </AppBar>
-
-<style>
-	a {
-		text-decoration: underline;
-	}
-</style>
diff --git a/src/lib/components/Hero.svelte b/src/lib/components/Hero.svelte
index 2411b51..e7ec1ab 100644
--- a/src/lib/components/Hero.svelte
+++ b/src/lib/components/Hero.svelte
@@ -1,96 +1,36 @@
 <script>
 	import { Section } from '$lib/utils';
+	import { joinUs } from '$lib/utils/socialLinks';
+	import { goToSection } from '$lib/utils/navigation';
+	import { IconHexagons } from '@tabler/icons-svelte';
 </script>
 
-<section id={Section.Hero} class="py-8 text-black md:py-24 dark:text-white">
-	<div class="max-w-screen-xl px-3 mx-auto md:px-10">
-		<div class="flex flex-col items-center space-x-0 xl:flex-row">
-			<div class="flex flex-col items-center w-full xl:w-2/3">
-				<div class="flex flex-col space-y-4">
-					<h1
-						class="text-5xl font-bold text-center sm:text-6xl md:text-7xl font-heading xl:text-left mb-2"
-					>
-						Innovate,
-						<div class="relative py-2 xl:py-4">
-							<span class="relative z-10 inline-block span"> Collaborate, </span>
-						</div>
-						Create
-					</h1>
-					<p
-						class="text-center text-md xl:text-lg xl:text-left md:max-w-[520px] max-w-[350px] text-[#5d5c5c] dark:text-[#cecece]"
-					>
-						<b>Samoa Code Hub</b> - Innovation meets collaboration in a thriving community of over 20
-						contributing software developers.
-					</p>
-				</div>
-
-				<div
-					class="mt-10 w-[80%] lg:w-[100%] mx-auto xl:mx-0 lg:max-w-[600px] flex sm:flex-row flex-col items-center sm:gap-8 gap-4"
-				>
-					<div class="button-wrapper flex justify-start pl-10 flex-1 w-full sm:w-auto">
-						<p class="sr-only">
-							Press Join us Now to find out more about becoming a Samoa Code Hub Member
-						</p>
-						<a
-							rel="external"
-							target="_blank"
-							href="https://docs.google.com/forms/d/e/1FAIpQLSckLWtZky5-jGFWi4HnzuCQC3F1af3-LaCYhRrU5NCK36HJ4g/viewform"
-							class="py-3 bg-blue-500 hover:bg-blue-600 rounded-xl px-14 text-white">Join us Now</a
-						>
-					</div>
-				</div>
-			</div>
-			<div class="w-full pt-2 xl:w-2/3">
-				<img src="/images/sso-banner-img.svg" class="w-full h-full" alt="Hero Section" />
-			</div>
-		</div>
+<section
+	id={Section.Hero}
+	class="h-[100vh] flex flex-col justify-center items-center border-b-2 border-[var(--border-color-100)] pt-9"
+>
+	<h1
+		class="text-[clamp(3.25rem,6vw,6rem)] font-semibold text-center leading-[0.9278]
+             max-w-[90%] mb-8 text-[var(--font-color-200)] tracking-[-0.01em] max-[768px]:max-w-full"
+	>
+		The developer network built for progress
+	</h1>
+	<h4
+		class="text-center w-[45%] my-4 mb-9 max-[768px]:w-[75%] max-[768px]:px-4 max-[450px]:w-full max-[450px]:px-4"
+	>
+		A thriving community where over twenty developers build and innovate together.
+	</h4>
+	<div class="flex gap-4 max-[360px]:flex-col">
+		<a
+			href="/"
+			class="link link-color"
+			title="Browse our latest projects!"
+			on:click|preventDefault={() => goToSection(Section.Projects)}
+		>
+			Our Projects <IconHexagons size="24" />
+		</a>
+		<a href={joinUs.link} target="_blank" class="link link-plain" title={joinUs.title}>
+			{joinUs.name}
+		</a>
 	</div>
 </section>
-
-<style lang="postcss">
-	section {
-		background-image: url('/images/hero-bg.svg');
-		background-size: cover;
-		background-position: center;
-	}
-
-	h1 {
-		line-height: 0.8;
-		@media (max-width: 1282px) {
-			line-height: 1.1;
-		}
-	}
-
-	a {
-		font-weight: 600;
-	}
-
-	img {
-		@media (max-width: 1282px) {
-			width: 75%;
-			margin-inline: auto;
-		}
-		@media (max-width: 768px) {
-			width: 100%;
-		}
-	}
-
-	.button-wrapper {
-		@media (max-width: 1282px) {
-			justify-content: center;
-		}
-	}
-
-	.span::after {
-		position: absolute;
-		top: -5%;
-		left: 50%;
-		transform: translateX(-50%);
-		content: '';
-		height: 120%;
-		width: 102%;
-		z-index: -1;
-		background: #dd5757;
-		border-radius: 0.75rem;
-	}
-</style>
diff --git a/src/lib/components/InfoOne.svelte b/src/lib/components/InfoOne.svelte
new file mode 100644
index 0000000..99131f8
--- /dev/null
+++ b/src/lib/components/InfoOne.svelte
@@ -0,0 +1,106 @@
+<script>
+</script>
+
+<div class="py-[clamp(3.125rem,8.3vw,7.5rem)]">
+	<div class="flex gap-[3rem] max-[768px]:flex-col">
+		<!-- Left box -->
+		<div
+			class="bg-[var(--grey-100)] rounded-[var(--border-radius-100)] w-[40%] px-[1.5rem]
+                pt-[2rem] pb-[3.75rem] max-[768px]:w-full"
+		>
+			<h3 class="mb-[2.25rem]">What we stand for</h3>
+			<ul>
+				<li class="mt-[1.25rem] list-disc ml-[1.25rem] text-[1rem] max-w-[22rem]">
+					We craft solutions that fit real problems — not the other way around.
+				</li>
+				<li class="mt-[1.25rem] list-disc ml-[1.25rem] text-[1rem] max-w-[22rem]">
+					We work with modern tools that let us build fast.
+				</li>
+				<li class="mt-[1.25rem] list-disc ml-[1.25rem] text-[1rem] max-w-[22rem]">
+					With skills across development, infrastructure and design — we get things done.
+				</li>
+			</ul>
+		</div>
+
+		<!-- Right box -->
+		<div
+			class="rounded-[var(--border-radius-100)] w-[60%] relative overflow-hidden
+                max-[768px]:w-full max-[768px]:aspect-[16/9] content-end text-right p-9 brick-container"
+		>
+			<h1 class="text-[clamp(3.25rem,1.0625rem+7vw,5rem)] leading-[1] font-medium">
+				Build to <br /> work <br /> for you
+			</h1>
+		</div>
+	</div>
+</div>
+
+<style lang="postcss">
+	:root {
+		--color-one: #e3e3e3;
+		--color-two: #cfcfcf;
+		--bg-w: 80px;
+		--bg-h: 140px;
+		--bg-half-w: calc(var(--bg-w) / 2);
+		--bg-half-h: calc(var(--bg-h) / 2);
+	}
+
+	.brick-container {
+		background: var(--grey-100);
+		background-size: var(--bg-w) var(--bg-h);
+		background-position:
+			0 0,
+			0 0,
+			var(--bg-half-w) var(--bg-half-h),
+			var(--bg-half-w) var(--bg-half-h),
+			0 0,
+			var(--bg-half-w) var(--bg-half-h);
+		background-image: linear-gradient(
+				30deg,
+				var(--color-one) 12%,
+				transparent 12.5%,
+				transparent 87%,
+				var(--color-one) 87.5%,
+				var(--color-one)
+			),
+			linear-gradient(
+				150deg,
+				var(--color-one) 12%,
+				transparent 12.5%,
+				transparent 87%,
+				var(--color-one) 87.5%,
+				var(--color-one)
+			),
+			linear-gradient(
+				30deg,
+				var(--color-one) 12%,
+				transparent 12.5%,
+				transparent 87%,
+				var(--color-one) 87.5%,
+				var(--color-one)
+			),
+			linear-gradient(
+				150deg,
+				var(--color-one) 12%,
+				transparent 12.5%,
+				transparent 87%,
+				var(--color-one) 87.5%,
+				var(--color-one)
+			),
+			linear-gradient(
+				60deg,
+				var(--color-two) 25%,
+				transparent 25.5%,
+				transparent 75%,
+				var(--color-two) 75%,
+				var(--color-two)
+			),
+			linear-gradient(
+				60deg,
+				var(--color-two) 25%,
+				transparent 25.5%,
+				transparent 75%,
+				var(--color-two) 75%,
+				var(--color-two)
+			);
+	}
+</style>
diff --git a/src/lib/components/InfoTwo.svelte b/src/lib/components/InfoTwo.svelte
new file mode 100644
index 0000000..0272931
--- /dev/null
+++ b/src/lib/components/InfoTwo.svelte
@@ -0,0 +1,14 @@
+<script>
+</script>
+
+<div
+	class="text-center bg-[var(--grey-100)] my-[clamp(3.125rem,8.3vw,7.5rem)] rounded-[var(--border-radius-100)]
+            py-[clamp(3.125rem,8.3vw,7.5rem)]"
+>
+	<h4 class="mx-auto px-[clamp(1.25rem,-12.1875rem+43vw,12rem)]">Our purpose</h4>
+	<h2 class="my-[1rem]">Empowering developers in Samoa</h2>
+	<h4 class="mx-auto px-[clamp(1.25rem,-12.1875rem+43vw,12rem)] max-[450px]:text-justify">
+		We empower Samoan developers to learn, build, and grow. Through collaboration, open knowledge,
+		and real-world projects, we advance technology for our islands and our future.
+	</h4>
+</div>
diff --git a/src/lib/components/Media.svelte b/src/lib/components/Media.svelte
deleted file mode 100644
index 73516b6..0000000
--- a/src/lib/components/Media.svelte
+++ /dev/null
@@ -1,67 +0,0 @@
-<script>
-	import { Section } from '$lib/utils';
-	import lunchSita from '../assets/images/lunch_sita.jpg';
-	import sprintMeeting from '../assets/images/sprint_meeting.jpg';
-	import ssoLunch1 from '../assets/images/sso_lunch.jpg';
-	import ssoLunch2 from '../assets/images/sso_lunch_2.jpg';
-	import ssoLunch3 from '../assets/images/sso_lunch_3.jpg';
-	import workshop from '../assets/images/workshop.jpg';
-</script>
-
-<section id={Section.Media} class="w-full">
-	<div class="container px-5 py-2 mx-auto lg:px-32 lg:pb-24">
-		<h1
-			class="text-center h1 font-bold border-yellow-50 pb-7 drop-shadow-xl dark:shadow-none md:pb-[5%]"
-		>
-			Samoa Code Hub <br /> Meet Ups
-		</h1>
-		<div class="flex flex-wrap -m-1 md:-m-2">
-			<div class="flex flex-wrap w-full lg:w-1/2">
-				<div class="w-full p-1 md:p-2 md:w-1/2">
-					<img
-						alt="gallery"
-						class="block object-cover object-center w-full h-full rounded-lg"
-						src={ssoLunch3}
-					/>
-				</div>
-				<div class="w-full p-1 md:p-2 md:w-1/2">
-					<img
-						alt="gallery"
-						class="block object-cover object-center w-full h-full rounded-lg"
-						src={lunchSita}
-					/>
-				</div>
-				<div class="w-full p-1 md:p-2">
-					<img
-						alt="gallery"
-						class="block object-cover object-center w-full h-full rounded-lg"
-						src={workshop}
-					/>
-				</div>
-			</div>
-			<div class="flex flex-wrap w-full lg:w-1/2">
-				<div class="w-full p-1 md:p-2">
-					<img
-						alt="gallery"
-						class="block object-cover object-center w-full h-full rounded-lg"
-						src={ssoLunch1}
-					/>
-				</div>
-				<div class="w-full p-1 md:p-2 md:w-1/2">
-					<img
-						alt="gallery"
-						class="block object-cover object-center w-full h-full rounded-lg"
-						src={ssoLunch2}
-					/>
-				</div>
-				<div class="w-full p-1 md:p-2 md:w-1/2">
-					<img
-						alt="gallery"
-						class="block object-cover object-center w-full h-full rounded-lg"
-						src={sprintMeeting}
-					/>
-				</div>
-			</div>
-		</div>
-	</div>
-</section>
diff --git a/src/lib/components/Projects.svelte b/src/lib/components/Projects.svelte
index d3ed757..c85bd07 100644
--- a/src/lib/components/Projects.svelte
+++ b/src/lib/components/Projects.svelte
@@ -1,114 +1,105 @@
 <script>
 	import { Section } from '$lib/utils';
+	import { IconHandClick } from '@tabler/icons-svelte';
+	import { socialItems } from '$lib/utils/socialLinks';
 	import ssoWebsiteImage from '../assets/projects-images/project-sso-website.png';
 	import sitaDbImage from '../assets/projects-images/project-sso-sitadb.png';
-	import { IconBrandGithubFilled, IconClick } from '@tabler/icons-svelte';
+
+	const githubLink = socialItems[0].link;
+	const githubTitle = socialItems[0].title;
 </script>
 
 <div
 	id={Section.Projects}
-	class="container px-5 py-2 lg:px-32 lg:py-24 bg-transparent mx-auto w-full"
+	class="py-[clamp(3.125rem,8.3vw,7.5rem)] border-y-2 border-[var(--border-color-100)] w-full"
 >
-	<h1 class="text-4xl font-bold text-center pb-8">Featured Projects</h1>
-
-	<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
-		<!-- Project 1 -->
-		<div class="rounded-lg overflow-hidden hover:shadow-lg project p-6 card">
-			<img src={sitaDbImage} alt="Project 1" class="w-full h-64 object-cover" />
-			<div class="mt-5">
-				<h3 class="text-xl mb-2">SITA Registration Web App</h3>
-				<p class="text-[#5d5c5c] dark:text-[#cecece] pb-4">
-					Developed and launched a web application solution tailored specifically for Samoa
-					Information Technology Association to revolutionize their onboarding process for new and
-					existing members.
-				</p>
-				<div class="flex gap-4 mt-6 cta">
-					<a
-						rel="external"
-						target="_blank"
-						href="https://register.sita.ws/"
-						class="bg-blue-500 hover:bg-blue-600 text-white py-2 px-5 rounded flex items-center"
-					>
-						<IconClick class="mr-2" /> Try it Now
-					</a>
-					<a
-						rel="external"
-						target="_blank"
-						href="https://github.com/sita-samoa/sita-membership"
-						class="bg-[#949494] hover:bg-[#818181] text-white py-2 px-5 rounded flex items-center"
-					>
-						<IconBrandGithubFilled class="mr-2" /> GitHub Repo
-					</a>
+	<h2>Featured Projects</h2>
+	<div class="flex w-full gap-[3rem] max-[768px]:flex-col">
+		<!-- Project Box 1 -->
+		<div class="w-1/2 h-full max-[768px]:w-full">
+			<div
+				class="relative bg-[var(--grey-100)] rounded-[var(--border-radius-100)] w-full h-[500px] content-start pt-[2.75rem] pl-[2rem]"
+			>
+				<img
+					src={sitaDbImage}
+					alt="SITA DB Website"
+					title="SITA DB website"
+					class="absolute top-0 left-0 z-0 w-full h-full object-contain"
+				/>
+				<div class="w-max">
+					<div class="h-[1px] w-full bg-[var(--border-color-200)] mb-[0.65rem]"></div>
+					<p class="text-[12px] leading-[1] italic text-black/65">
+						project type: <span class="font-medium not-italic text-[var(--font-color-100)]"
+							>Client</span
+						>
+					</p>
+					<p class="text-[12px] leading-[1] italic text-black/65 mt-[0.65rem]">
+						tech stack: <span class="font-medium not-italic text-[var(--font-color-100)]"
+							>Vue, Nginx, Php</span
+						>
+					</p>
 				</div>
 			</div>
+			<h3 class="my-[3rem] mb-[1rem]">SITA Registration Web App</h3>
+			<p class="max-[768px]:text-justify">
+				Developed and launched a web application solution tailored specifically for Samoa
+				Information Technology Association to revolutionize their onboarding process for new and
+				existing members.
+			</p>
+			<div class="flex gap-4 mt-9">
+				<a
+					href="https://register.sita.ws/"
+					target="_blank"
+					class="link link-color"
+					title="Browse it live"
+				>
+					Try it out <IconHandClick size="20" stroke="1.75" />
+				</a>
+				<a
+					href="https://github.com/sita-samoa/sita-membership"
+					target="_blank"
+					class="link link-plain"
+					title="Dive into the code"
+				>
+					Github
+				</a>
+			</div>
 		</div>
 
-		<!-- Project 2 -->
-		<div class="rounded-lg overflow-hidden hover:shadow-lg project p-6 card">
-			<img src={ssoWebsiteImage} alt="Project 2" class="w-full h-64 object-cover" />
-			<div class="mt-5">
-				<h3 class="text-xl mb-2">Samoa Code Hub Website</h3>
-				<p class="text-[#5d5c5c] dark:text-[#cecece]">
-					Designed & Created a brand new website for Samoa Code Hub, designed from the ground up to
-					reflect the vibrant programming community in Samoa. The new website showcases the latest
-					events, projects and members for Samoa Code Hub.
-				</p>
-				<div class="flex gap-4 mt-4">
-					<a
-						rel="external"
-						target="_blank"
-						href="https://github.com/Samoa-Stack-Overflow/sso-website"
-						class="bg-[#949494] hover:bg-[#818181] text-white py-2 px-5 rounded flex items-center"
-					>
-						<IconBrandGithubFilled class="mr-2" /> GitHub Repo
-					</a>
+		<!-- Project Box 2 -->
+		<div class="w-1/2 h-full max-[768px]:w-full">
+			<div
+				class="relative bg-[var(--grey-100)] rounded-[var(--border-radius-100)] w-full h-[500px] content-start pt-[2.75rem] pl-[2rem] overflow-hidden"
+			>
+				<img
+					src={ssoWebsiteImage}
+					alt="SCH Website"
+					title="SCH website"
+					class="absolute z-0 h-full top-36 left-1/2 -translate-x-1/2 transform object-contain"
+				/>
+				<div class="w-max">
+					<div class="h-[1px] w-full bg-[var(--border-color-200)] mb-[0.65rem]"></div>
+					<p class="text-[12px] leading-[1] italic text-black/65">
+						project type: <span class="font-medium not-italic text-[var(--font-color-100)]"
+							>Open Source</span
+						>
+					</p>
+					<p class="text-[12px] leading-[1] italic text-black/65 mt-[0.65rem]">
+						tech stack: <span class="font-medium not-italic text-[var(--font-color-100)]"
+							>SvelteKit, Tailwind</span
+						>
+					</p>
 				</div>
 			</div>
+			<h3 class="my-[3rem] mb-[1rem]">Samoa Code Hub Website</h3>
+			<p class="max-[768px]:text-justify">
+				Designed & Created a brand new website for Samoa Code Hub, designed from the ground up to
+				reflect the vibrant programming community in Samoa. The new website showcases the latest
+				projects and members for Samoa Code Hub.
+			</p>
+			<a href={githubLink} target="_blank" class="mt-9 link link-plain" title={githubTitle}>
+				Github
+			</a>
 		</div>
 	</div>
 </div>
-
-<style>
-	h3 {
-		letter-spacing: 1.5px;
-		margin: 0;
-		font-size: 18px;
-		font-weight: 600;
-	}
-
-	p {
-		letter-spacing: 1.5px;
-		margin-top: 0.5rem;
-		font-size: 14px;
-		text-align: justify;
-	}
-
-	a {
-		font-weight: 600;
-
-		@media (max-width: 1024px) {
-			margin-inline: auto;
-			width: 60%;
-			display: flex;
-			justify-content: center;
-			align-items: center;
-		}
-	}
-
-	.card {
-		transition: all 0.2s;
-	}
-
-	img {
-		border-top-right-radius: 0.5rem;
-		border-top-left-radius: 0.5rem;
-	}
-
-	.cta {
-		width: 100%;
-
-		@media (max-width: 1024px) {
-			flex-direction: column;
-		}
-	}
-</style>
diff --git a/src/lib/components/Sidebar.svelte b/src/lib/components/Sidebar.svelte
index 03ba7ba..73912fd 100644
--- a/src/lib/components/Sidebar.svelte
+++ b/src/lib/components/Sidebar.svelte
@@ -1,33 +1,81 @@
 <script>
 	import { menuItems } from '$lib/utils';
-	import { goto } from '$app/navigation';
+	import { goToSection } from '$lib/utils/navigation';
+	import { clickOutside } from '$lib/utils/clickOutside';
+	import { toggleSidebar, toggleSidebarState, closeSidebar } from '$lib/utils/sidebarLogic';
+	import { IconMenuDeep } from '@tabler/icons-svelte';
+	import { sidebarEnhance } from '$lib/utils/sidebarEnhance';
+	import { joinUs, socialItems } from '$lib/utils/socialLinks';
 
-	export let toggleSidebar = false;
+	async function handleNavClick(ref) {
+		closeSidebar();
+		await goToSection(ref.replace('#', ''));
+	}
+
+	// size for social-media buttons
+	let iconSize = 16;
 </script>
 
+{#if $toggleSidebar}
+	<button
+		class="fixed inset-0 top-[var(--navbar-height)] bg-black/40 backdrop-blur-[2px] z-10"
+		on:click={closeSidebar}
+	></button>
+{/if}
+
 <div
-	class={`pr-12 lg:hidden focus:shadow-outline z-20 variant-filled-surface
-  space-y-6 ${toggleSidebar ? '' : '-translate-x-full'} mt-16 pt-5 px-2 absolute overflow-hidden
-	inset-y-0 left-0 transform transition delay-200 duration-700 ease-in-out`}
+	use:clickOutside
+	on:outclick={closeSidebar}
+	use:sidebarEnhance
+	role="dialog"
+	aria-modal="true"
+	class={`lg:hidden variant-filled-surface fixed top-[var(--navbar-height)] bottom-0 w-[80%] max-w-[300px] right-0
+          bg-[var(--background-color-100)] backdrop-blur-[3rem] px-[1.25rem] overflow-hidden transform transition 
+          duration-300 ease-in-out ${$toggleSidebar ? 'translate-x-0' : 'translate-x-full'} z-20`}
 >
-	<!-- nav -->
-	<div class="btn-group-vertical">
-		{#each menuItems as item}
-			<button
-				on:click={() => {
-					goto(item.ref);
-					toggleSidebar = false;
-				}}
-				type="button"
-				class="btn flex w-full rounded transition duration-200"
-			>
-				<div class="w-full py-2 flex justify-start">
-					<div class="flex items-center h-6">
-						<svelte:component this={item.icon} name={item.icon} size={20} />
-					</div>
-					<span class="pl-2 whitespace-nowrap overflow-hidden">{item.name}</span>
-				</div>
-			</button>
-		{/each}
+	<!-- First nav block -->
+	<div class="w-full py-[2.25rem] text-right border-b-2 border-[var(--border-color-100)]">
+		<ul class="flex flex-col gap-4 mb-4">
+			{#each menuItems as item}
+				<li>
+					<a
+						href="/"
+						class="inline-flex justify-center items-center gap-[0.65rem]"
+						on:click|preventDefault={() => handleNavClick(item.ref)}
+					>
+						{item.name}
+					</a>
+				</li>
+			{/each}
+		</ul>
+		<a
+			href={joinUs.link}
+			class="inline-flex justify-center items-center gap-[0.65rem]"
+			on:click={closeSidebar}
+			target="_blank"
+		>
+			{joinUs.name}
+			<svelte:component this={joinUs.icon} size={iconSize} />
+		</a>
+	</div>
+
+	<!-- Second nav block -->
+	<div class="w-full py-[2.25rem] text-right">
+		<p class="mb-[1.55rem] font-medium">Quick Contact</p>
+		<ul class="flex flex-col gap-4">
+			{#each socialItems as item}
+				<li>
+					<a
+						href={item.link}
+						class="inline-flex justify-center items-center gap-[0.65rem]"
+						on:click={closeSidebar}
+						target="_blank"
+					>
+						{item.name}
+						<svelte:component this={item.icon} size={iconSize} />
+					</a>
+				</li>
+			{/each}
+		</ul>
 	</div>
 </div>
diff --git a/src/lib/service/contactService.js b/src/lib/service/contactService.js
new file mode 100644
index 0000000..5d2d00a
--- /dev/null
+++ b/src/lib/service/contactService.js
@@ -0,0 +1,12 @@
+export async function submitContactForm(formSpree, payload) {
+	const response = await fetch(formSpree, {
+		method: 'POST',
+		headers: { Accept: 'application/json', 'Content-Type': 'application/json' },
+		body: JSON.stringify(payload)
+	});
+
+	if (!response.ok) {
+		const data = await response.json().catch(() => ({}));
+		throw new Error(data?.errors?.map((e) => e.message).join(', ') || 'Form submission failed');
+	}
+}
diff --git a/src/lib/utils/clickOutside.js b/src/lib/utils/clickOutside.js
new file mode 100644
index 0000000..6952721
--- /dev/null
+++ b/src/lib/utils/clickOutside.js
@@ -0,0 +1,21 @@
+export function clickOutside(node) {
+	const shouldIgnore = (event) => {
+		return event.target.closest('[data-no-close]') !== null;
+	};
+
+	const handleClick = (event) => {
+		if (shouldIgnore(event)) return;
+
+		if (node && !node.contains(event.target) && !event.defaultPrevented) {
+			node.dispatchEvent(new CustomEvent('outclick', { detail: node }));
+		}
+	};
+
+	document.addEventListener('click', handleClick, true);
+
+	return {
+		destroy() {
+			document.removeEventListener('click', handleClick, true);
+		}
+	};
+}
diff --git a/src/lib/utils/contributors.js b/src/lib/utils/contributors.js
new file mode 100644
index 0000000..14fb96c
--- /dev/null
+++ b/src/lib/utils/contributors.js
@@ -0,0 +1,107 @@
+import Andre from '../assets/images/andre-profile.jpeg';
+import Alesana from '../assets/images/alesana-profile.png';
+import Eugene from '../assets/images/eugene-profile.jpeg';
+import Ronaldo from '../assets/images/ronaldo-profile.jpeg';
+import Chen from '../assets/images/chen-profile.jpeg';
+import Antonio from '../assets/images/antonio-profile.jpeg';
+import Aaron from '../assets/images/aaron-profile.jpeg';
+import Junior from '../assets/images/junior-profile.jpeg';
+import Tausani from '../assets/images/tausani-profile.jpeg';
+import Ainsof from '../assets/images/ainsof-profile.jpeg';
+import Hilton from '../assets/images/hilton-profile.jpeg';
+import Kendrick from '../assets/images/kendrick-profile.jpeg';
+import Henry from '../assets/images/henry-profile.jpg';
+
+export const Contributors = [
+	{
+		avatar: Andre,
+		name: 'Andre Westerlund',
+		title: 'Founder & Senior Full Stack Developer',
+		github: 'https://github.com/westerandr',
+		linkedin: 'https://www.linkedin.com/in/andrewesterlund/'
+	},
+	{
+		avatar: Alesana,
+		name: 'Alesana Eteuati Jr',
+		title: 'Senior Software Developer',
+		github: 'https://github.com/Green-Ranger11',
+		linkedin: 'https://www.linkedin.com/in/alesana-eteuati-jr/'
+	},
+	{
+		avatar: Eugene,
+		name: 'Eugene Barker',
+		title: 'Solutions Architect',
+		github: 'https://github.com/genebarker',
+		linkedin: 'https://www.linkedin.com/in/eugenebarker/'
+	},
+	{
+		avatar: Chen,
+		name: 'Chia Chen Lin',
+		title: 'Software Developer',
+		github: 'https://github.com/shifu-lin',
+		linkedin: 'https://www.linkedin.com/in/chia-chen-lin-8625251b9/'
+	},
+	{
+		avatar: Junior,
+		name: 'Junior Latu',
+		title: 'Software Developer',
+		github: 'https://github.com/jrlatu',
+		linkedin: 'https://www.linkedin.com/in/talavou-junior-latu/'
+	},
+	{
+		avatar: Ronaldo,
+		name: 'Ronaldo Pose',
+		title: 'Business Solutions Manager',
+		github: 'https://github.com/renaldox',
+		linkedin: 'https://www.linkedin.com/in/ronaldo-pose/'
+	},
+	{
+		avatar: Aaron,
+		name: 'Aaron Solofa',
+		title: 'GIS Specialist',
+		github: 'https://github.com/aaronjamessolofa',
+		linkedin: 'https://www.linkedin.com/in/aaron-solofa-06b923123/'
+	},
+	{
+		avatar: Kendrick,
+		name: 'Kendrick Lui',
+		title: 'Web Developer',
+		github: 'https://github.com/Ken2523',
+		linkedin: 'https://www.linkedin.com/in/ken-lui-15017a232/'
+	},
+	{
+		avatar: Antonio,
+		name: 'Antonio Chadwick',
+		title: 'IT Engineer',
+		github: 'https://github.com/antoniochadwick',
+		linkedin: 'https://www.linkedin.com/in/antonio-chadwick-8ab853141'
+	},
+	{
+		avatar: Tausani,
+		name: 'Tausani Ah Chong',
+		title: 'Software Engineer',
+		github: 'https://github.com/tausani-ah-chong',
+		linkedin: 'https://www.linkedin.com/in/tausaniahchong'
+	},
+	{
+		avatar: Ainsof,
+		name: "Ainsof So'o",
+		title: 'Systems Developer & Analyst',
+		github: 'https://github.com/ainsofs',
+		linkedin: 'https://www.linkedin.com/in/ainsofs'
+	},
+	{
+		avatar: Hilton,
+		name: "Hilton So'o",
+		title: 'Managing Director',
+		github: 'https://github.com/encode685',
+		linkedin: 'https://www.linkedin.com/in/hilton-samuelu-so-o-8711aa103'
+	},
+	{
+		avatar: Henry,
+		name: 'Henry Fuerst',
+		title: 'Frontend Developer',
+		github: 'https://github.com/5thAttemptCode',
+		linkedin: 'https://www.linkedin.com/in/henry-fuerst-10b58a187/'
+	}
+];
diff --git a/src/lib/utils/form.js b/src/lib/utils/form.js
new file mode 100644
index 0000000..23312eb
--- /dev/null
+++ b/src/lib/utils/form.js
@@ -0,0 +1,13 @@
+export function validateEmail(email) {
+	return /\S+@\S+\.\S+/.test(email);
+}
+
+export function triggerToast(toast, message, type = 'success') {
+	const background =
+		{
+			success: 'variant-filled-success',
+			error: 'variant-filled-error'
+		}[type] ?? 'variant-filled-success';
+
+	toast.trigger({ message, background, timeout: 2500 });
+}
diff --git a/src/lib/utils/menuItems.js b/src/lib/utils/menuItems.js
index 9d94232..61b5cfe 100644
--- a/src/lib/utils/menuItems.js
+++ b/src/lib/utils/menuItems.js
@@ -1,38 +1,26 @@
-import { IconHome2, IconNews, IconMail, IconCode, IconUsers } from '@tabler/icons-svelte';
-
 export const Section = {
 	Hero: 'Hero',
-	Media: 'Media',
+	Projects: 'Projects',
 	Contributors: 'Contributors',
-	Contact: 'Contact',
 	About: 'About',
-	Projects: 'Projects'
+	Contact: 'Contact'
 };
 
 export const menuItems = [
-	{
-		ref: `#${Section.About}`,
-		name: 'About',
-		icon: IconCode
-	},
 	{
 		ref: `#${Section.Projects}`,
-		name: 'Projects',
-		icon: IconUsers
+		name: 'Projects'
 	},
 	{
-		ref: `#${Section.Contributors}`,
-		name: 'Contributors',
-		icon: IconUsers
+		ref: `#${Section.About}`,
+		name: 'About Us'
 	},
 	{
-		ref: `#${Section.Media}`,
-		name: 'Media',
-		icon: IconNews
+		ref: `#${Section.Contributors}`,
+		name: 'The Team'
 	},
 	{
 		ref: `#${Section.Contact}`,
-		name: 'Contact Us',
-		icon: IconMail
+		name: 'Contact Us'
 	}
 ];
diff --git a/src/lib/utils/navigation.js b/src/lib/utils/navigation.js
new file mode 100644
index 0000000..1a0e0b8
--- /dev/null
+++ b/src/lib/utils/navigation.js
@@ -0,0 +1,18 @@
+import { goto } from '$app/navigation';
+
+export async function goToSection(section) {
+	if (section === 'Contributors') {
+		await goto('/contributors');
+		return;
+	}
+
+	if (window.location.pathname === '/') {
+		document.getElementById(section)?.scrollIntoView({ behavior: 'smooth' });
+		return;
+	}
+
+	await goto('/');
+	setTimeout(() => {
+		document.getElementById(section)?.scrollIntoView({ behavior: 'smooth' });
+	}, 100);
+}
diff --git a/src/lib/utils/sidebarEnhance.js b/src/lib/utils/sidebarEnhance.js
new file mode 100644
index 0000000..dabf38a
--- /dev/null
+++ b/src/lib/utils/sidebarEnhance.js
@@ -0,0 +1,84 @@
+import { get } from 'svelte/store';
+import { toggleSidebar } from './sidebarLogic';
+
+export function sidebarEnhance(node) {
+	let previousOverflow = '';
+	let focusableElements = [];
+	let firstFocusable;
+	let lastFocusable;
+	let openerButton = null;
+
+	function lockScroll() {
+		previousOverflow = document.body.style.overflow;
+		document.body.style.overflow = 'hidden';
+	}
+
+	function unlockScroll() {
+		document.body.style.overflow = previousOverflow;
+	}
+
+	function setupFocusTrap() {
+		// find elements inside sidebar
+		focusableElements = Array.from(
+			node.querySelectorAll('a, button, input, select, textarea, [tabindex]:not([tabindex="-1"])')
+		);
+
+		firstFocusable = focusableElements[0];
+		lastFocusable = focusableElements[focusableElements.length - 1];
+
+		// Focus the first focusable element
+		if (firstFocusable) firstFocusable.focus();
+	}
+
+	function restoreOpenerFocus() {
+		if (openerButton) openerButton.focus();
+	}
+
+	function handleKeydown(e) {
+		if (!get(toggleSidebar)) return;
+
+		// ESC closes sidebar
+		if (e.key === 'Escape') {
+			toggleSidebar.set(false);
+		}
+
+		// Focus trapping
+		if (e.key === 'Tab') {
+			if (e.shiftKey) {
+				// Shift+Tab from first element → jump to last
+				if (document.activeElement === firstFocusable) {
+					e.preventDefault();
+					lastFocusable.focus();
+				}
+			} else {
+				// Tab from last element → jump to first
+				if (document.activeElement === lastFocusable) {
+					e.preventDefault();
+					firstFocusable.focus();
+				}
+			}
+		}
+	}
+
+	// Watch the store value to activate/deactivate features
+	const unsubscribe = toggleSidebar.subscribe((isOpen) => {
+		if (isOpen) {
+			openerButton = document.querySelector('[data-sidebar-toggle]');
+			lockScroll();
+			setupFocusTrap();
+			document.addEventListener('keydown', handleKeydown);
+		} else {
+			unlockScroll();
+			restoreOpenerFocus();
+			document.removeEventListener('keydown', handleKeydown);
+		}
+	});
+
+	return {
+		destroy() {
+			unlockScroll();
+			document.removeEventListener('keydown', handleKeydown);
+			unsubscribe();
+		}
+	};
+}
diff --git a/src/lib/utils/sidebarLogic.js b/src/lib/utils/sidebarLogic.js
new file mode 100644
index 0000000..65dc257
--- /dev/null
+++ b/src/lib/utils/sidebarLogic.js
@@ -0,0 +1,11 @@
+import { writable } from 'svelte/store';
+
+export const toggleSidebar = writable(false);
+
+export function closeSidebar() {
+	toggleSidebar.set(false);
+}
+
+export function toggleSidebarState() {
+	toggleSidebar.update((v) => !v);
+}
diff --git a/src/lib/utils/socialLinks.js b/src/lib/utils/socialLinks.js
new file mode 100644
index 0000000..d8fc090
--- /dev/null
+++ b/src/lib/utils/socialLinks.js
@@ -0,0 +1,34 @@
+import {
+	IconExternalLink,
+	IconBrandGithub,
+	IconBrandDiscord,
+	IconBrandFacebook
+} from '@tabler/icons-svelte';
+
+export const joinUs = {
+	name: 'Join Us',
+	link: 'https://docs.google.com/forms/d/e/1FAIpQLSckLWtZky5-jGFWi4HnzuCQC3F1af3-LaCYhRrU5NCK36HJ4g/viewform',
+	icon: IconExternalLink,
+	title: 'Become a member!'
+};
+
+export const socialItems = [
+	{
+		name: 'Github',
+		link: 'https://github.com/SamoaCodeHub',
+		icon: IconBrandGithub,
+		title: 'Dive into the code'
+	},
+	{
+		name: 'Discord',
+		link: 'https://docs.google.com/forms/d/e/1FAIpQLSckLWtZky5-jGFWi4HnzuCQC3F1af3-LaCYhRrU5NCK36HJ4g/viewform',
+		icon: IconBrandDiscord,
+		title: 'Join us on Discord'
+	},
+	{
+		name: 'Facebook',
+		link: 'https://www.facebook.com/groups/948415479224570',
+		icon: IconBrandFacebook,
+		title: 'Get the latest on Facebook'
+	}
+];
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index b5eeacb..b3673b6 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -7,7 +7,6 @@
 	import { storePopup, initializeStores } from '@skeletonlabs/skeleton';
 	import Appbar from '$lib/components/Appbar.svelte';
 	import Sidebar from '$lib/components/Sidebar.svelte';
-	import BackToTop from '$lib/components/BackToTop.svelte';
 	import Analytics from '$lib/components/Analytics.svelte';
 
 	initializeStores();
@@ -18,8 +17,6 @@
 	function scrollHandler(event) {
 		visible = event.currentTarget.scrollTop > 150;
 	}
-
-	let toggleSidebar = false;
 </script>
 
 <svelte:head>
@@ -32,10 +29,10 @@
 <AppShell on:scroll={scrollHandler}>
 	<svelte:fragment slot="header">
 		<!-- App Bar -->
-		<Appbar bind:toggleSidebar />
+		<Appbar />
 	</svelte:fragment>
 	<svelte:fragment slot="sidebarLeft">
-		<Sidebar bind:toggleSidebar />
+		<Sidebar />
 		<Toast />
 	</svelte:fragment>
 	<!-- Page Route Content -->
@@ -44,6 +41,3 @@
 		<Footer />
 	</svelte:fragment>
 </AppShell>
-{#if visible}
-	<BackToTop />
-{/if}
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 900f71c..bbcca90 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,15 +1,15 @@
 <script>
-	import Hero from '$lib/components/Hero.svelte';
-	import Media from '$lib/components/Media.svelte';
-	import Contact from '$lib/components/Contact.svelte';
-	import Contributors from '$lib/components/Contributors.svelte';
 	import About from '$lib/components/About.svelte';
+	import Contact from '$lib/components/Contact.svelte';
+	import Hero from '$lib/components/Hero.svelte';
+	import InfoOne from '$lib/components/InfoOne.svelte';
+	import InfoTwo from '$lib/components/InfoTwo.svelte';
 	import Projects from '$lib/components/Projects.svelte';
 </script>
 
 <Hero />
-<About />
+<InfoOne />
 <Projects />
-<Contributors />
-<Media />
+<InfoTwo />
+<About />
 <Contact />
diff --git a/src/routes/contributors/+page.svelte b/src/routes/contributors/+page.svelte
new file mode 100644
index 0000000..3e6c519
--- /dev/null
+++ b/src/routes/contributors/+page.svelte
@@ -0,0 +1,5 @@
+<script>
+	import Contributors from '$lib/components/Contributors.svelte';
+</script>
+
+<Contributors />
diff --git a/sso-custom-theme.js b/sso-custom-theme.js
index 6b395fa..3c8a5ef 100644
--- a/sso-custom-theme.js
+++ b/sso-custom-theme.js
@@ -90,7 +90,7 @@ export const ssoCustomTheme = {
 		'--color-surface-200': '203 225 240', // #cbe1f0
 		'--color-surface-300': '172 206 231', // #accee7
 		'--color-surface-400': '110 170 213', // #6eaad5
-		'--color-surface-500': '48 133 195', // #3085c3
+		'--color-surface-500': '255 255 255', // #3085c3
 		'--color-surface-600': '43 120 176', // #2b78b0
 		'--color-surface-700': '36 100 146', // #246492
 		'--color-surface-800': '29 80 117', // #1d5075
diff --git a/tailwind.config.js b/tailwind.config.cjs
similarity index 52%
rename from tailwind.config.js
rename to tailwind.config.cjs
index d9b1658..c3913da 100644
--- a/tailwind.config.js
+++ b/tailwind.config.cjs
@@ -2,9 +2,6 @@ import { join } from 'path';
 
 import forms from '@tailwindcss/forms';
 import typography from '@tailwindcss/typography';
-import { skeleton } from '@skeletonlabs/tw-plugin';
-
-import { ssoCustomTheme } from './sso-custom-theme';
 
 export default {
 	darkMode: 'class',
@@ -15,19 +12,5 @@ export default {
 	theme: {
 		extend: {}
 	},
-	plugins: [
-		forms,
-		typography,
-		skeleton({
-			themes: {
-				custom: [ssoCustomTheme],
-				preset: [
-					{
-						name: 'skeleton',
-						enhancements: true
-					}
-				]
-			}
-		})
-	]
+	plugins: [forms, typography]
 };
diff --git a/tests/test.js b/tests/test.js
index 72deed9..8050cd5 100644
--- a/tests/test.js
+++ b/tests/test.js
@@ -1,31 +1,33 @@
 import { expect, test } from '@playwright/test';
 
-test('Hero section has expected p', async ({ page }) => {
+// HERO SECTION (h1)
+test('Hero section has expected heading', async ({ page }) => {
 	await page.goto('/');
 	await expect(
-		page.getByText('Press Join us Now to find out more about becoming a Samoa Code Hub Member')
+		page.getByRole('heading', {
+			name: 'The developer network built for progress',
+			level: 1
+		})
 	).toBeVisible();
 });
 
-test('Clicking "Projects" button navigates to projects page and displays Featured Projects h1', async ({
+// PROJECTS NAVIGATION (h2 on the projects page)
+test('Clicking "Projects" button navigates to projects page and displays Featured Projects heading', async ({
 	page
 }) => {
 	await page.goto('/');
 	await page.click('text=Projects');
-	await expect(page.locator('h1:has-text("Featured Projects")')).toBeVisible();
+	await expect(page.getByRole('heading', { name: 'Featured Projects', level: 2 })).toBeVisible();
 });
 
-test('Media section has expected h1', async ({ page }) => {
+// CONTACT SECTION (h2)
+test('Contact section has expected heading', async ({ page }) => {
 	await page.goto('/');
-	await expect(page.getByText('Samoa Code Hub Meet Ups')).toBeVisible();
+	await expect(page.getByRole('heading', { name: 'Contact Us', level: 2 })).toBeVisible();
 });
 
-test('Contact section has expected h1', async ({ page }) => {
-	await page.goto('/');
-	await expect(page.getByRole('heading', { name: 'Contact Us' })).toBeVisible();
-});
-
-test('Contributors section has expected h1', async ({ page }) => {
-	await page.goto('/');
-	await expect(page.getByText('Meet our Seki Devs')).toBeVisible();
+// CONTRIBUTORS PAGE (now at /contributors, h2)
+test('Contributors page has expected heading', async ({ page }) => {
+	await page.goto('/contributors');
+	await expect(page.getByRole('heading', { name: 'Meet our Seki Devs', level: 2 })).toBeVisible();
 });