diff --git a/css/style.css b/css/style.css
index 41db137d..a4db7954 100644
--- a/css/style.css
+++ b/css/style.css
@@ -1,46 +1,221 @@
+/* CSS Custom Properties */
+:root {
+    --primary-color: #6366f1;
+    --primary-dark: #4f46e5;
+    --secondary-color: #10b981;
+    --accent-color: #f59e0b;
+    --text-primary: #1f2937;
+    --text-secondary: #6b7280;
+    --text-muted: #9ca3af;
+    --bg-primary: #ffffff;
+    --bg-secondary: #f8fafc;
+    --bg-card: #ffffff;
+    --border-color: #e5e7eb;
+    --border-light: #f3f4f6;
+    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+    --gradient-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    --gradient-secondary: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
+}
+
+/* Reset and Base Styles */
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    min-height: 100vh;
+    color: var(--text-primary);
+    line-height: 1.6;
+}
 
+/* Utility Classes */
+.hidden {
+    display: none;
+}
 
 .inline-block {
-display: inline;
+    display: inline-block;
 }
 
-.table {
-background: orange;
-width: 90%;
-text-align: left;
-margin: auto;
+.fade-in {
+    animation: fadeIn 0.5s ease-in;
 }
 
-.spinner {
-  display: none;
-  position: absolute;
-  left: 50%;
-  top: 50%;
-  z-index: 1;
-  width: 150px;
-  height: 150px;
-  margin: -75px 0 0 -75px;
-  border: 16px solid #f3f3f3;
-  border-radius: 50%;
-  border-top: 16px solid #3498db;
-  width: 120px;
-  height: 120px;
-  -webkit-animation: spin 2s linear infinite;
-  animation: spin 2s linear infinite;
+/* Header Styles */
+.header {
+    background: rgba(255, 255, 255, 0.1);
+    backdrop-filter: blur(10px);
+    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
+    padding: 1rem 0;
+    position: sticky;
+    top: 0;
+    z-index: 100;
 }
 
+.header-content {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 0 1rem;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
 
-@-webkit-keyframes spin {
-  0% { -webkit-transform: rotate(0deg); }
-  100% { -webkit-transform: rotate(360deg); }
+.logo {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    color: white;
+    font-weight: 700;
+    font-size: 1.25rem;
 }
 
-.btn-primary {
-    color: #fff;
-    background-color: #0073e6;
-    border-color: #0073e6;
+.logo .badge {
+    background: var(--primary-color);
+    color: white;
+    padding: 0.25rem 0.75rem;
+    border-radius: 9999px;
+    font-size: 0.75rem;
+    font-weight: 600;
+}
+
+.contact-link {
+    color: white;
+    text-decoration: none;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    font-size: 0.875rem;
+    transition: all 0.3s ease;
+}
+
+.contact-link:hover {
+    color: #f0f9ff;
+    transform: translateY(-1px);
+}
+
+/* Hero Section */
+.hero {
+    text-align: center;
+    padding: 4rem 1rem;
+    color: white;
+    max-width: 1200px;
+    margin: 0 auto;
+}
+
+.hero h1 {
+    font-size: clamp(2.5rem, 5vw, 4rem);
+    font-weight: 700;
+    margin-bottom: 1rem;
+    background: linear-gradient(135deg, #ffffff 0%, #f0f9ff 100%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.hero p {
+    font-size: 1.25rem;
+    margin-bottom: 2rem;
+    opacity: 0.9;
+}
+
+.labels-showcase {
+    display: flex;
+    justify-content: center;
+    gap: 1rem;
+    flex-wrap: wrap;
+    margin-top: 2rem;
+}
+
+.issue-label {
+    padding: 0.5rem 1rem;
+    border-radius: 9999px;
+    font-size: 0.875rem;
+    font-weight: 600;
+    backdrop-filter: blur(10px);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    transition: all 0.3s ease;
 }
 
+.issue-label:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
+}
+
+.good-first-issue {
+    background: rgba(99, 102, 241, 0.9);
+    color: white;
+}
+
+.starter-task {
+    background: rgba(16, 185, 129, 0.9);
+    color: white;
+}
+
+.help-wanted {
+    background: rgba(245, 158, 11, 0.9);
+    color: white;
+}
+
+/* Main Content */
+.main-content {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 0 1rem 4rem;
+}
+
+.search-container {
+    background: var(--bg-card);
+    border-radius: 1rem;
+    padding: 2rem;
+    box-shadow: var(--shadow-lg);
+    margin-bottom: 2rem;
+    backdrop-filter: blur(10px);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+/* Form Styles */
+.form-group {
+    margin-bottom: 1.5rem;
+}
+
+.form-label {
+    display: block;
+    font-weight: 600;
+    margin-bottom: 0.5rem;
+    color: var(--text-primary);
+}
+
+.form-select {
+    width: 100%;
+    padding: 0.75rem 1rem;
+    border: 2px solid var(--border-color);
+    border-radius: 0.5rem;
+    background: var(--bg-primary);
+    font-size: 1rem;
+    transition: all 0.3s ease;
+    appearance: none;
+    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
+    background-position: right 0.5rem center;
+    background-repeat: no-repeat;
+    background-size: 1.5em 1.5em;
+    padding-right: 2.5rem;
+}
+
+.form-select:focus {
+    outline: none;
+    border-color: var(--primary-color);
+    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
+}
+
+/* Button Styles */
 .btn {
     display: inline-block;
     font-weight: 400;
@@ -56,4 +231,241 @@ margin: auto;
     padding: .5rem 1rem;
     font-size: 1rem;
     border-radius: .25rem;
+    cursor: pointer;
+    transition: all 0.3s ease;
 }
+
+.btn-primary {
+    color: #fff;
+    background-color: #0073e6;
+    border-color: #0073e6;
+}
+
+.btn-primary:hover {
+    background-color: var(--primary-dark);
+    border-color: var(--primary-dark);
+    transform: translateY(-1px);
+}
+
+/* Results Container */
+.results-container {
+    background: var(--bg-card);
+    border-radius: 1rem;
+    overflow: hidden;
+    box-shadow: var(--shadow-lg);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.results-header {
+    background: var(--bg-secondary);
+    padding: 1.5rem;
+    border-bottom: 1px solid var(--border-color);
+}
+
+.results-header h2 {
+    font-size: 1.5rem;
+    font-weight: 600;
+    margin-bottom: 0.5rem;
+}
+
+.sort-buttons {
+    display: flex;
+    gap: 0.5rem;
+    flex-wrap: wrap;
+    margin-top: 1rem;
+}
+
+.sort-btn {
+    padding: 0.5rem 1rem;
+    border: 1px solid var(--border-color);
+    background: var(--bg-primary);
+    border-radius: 0.5rem;
+    font-size: 0.875rem;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+}
+
+.sort-btn:hover {
+    background: var(--primary-color);
+    color: white;
+    border-color: var(--primary-color);
+    transform: translateY(-1px);
+}
+
+.sort-btn.active {
+    background: var(--primary-color);
+    color: white;
+    border-color: var(--primary-color);
+}
+
+/* Table Styles */
+.table-container {
+    overflow-x: auto;
+}
+
+.table {
+    background: var(--bg-primary);
+    width: 90%;
+    text-align: left;
+    margin: auto;
+    border-collapse: collapse;
+}
+
+.results-table {
+    width: 100%;
+    border-collapse: collapse;
+}
+
+.results-table th {
+    background: var(--bg-secondary);
+    padding: 1rem;
+    text-align: left;
+    font-weight: 600;
+    color: var(--text-primary);
+    border-bottom: 1px solid var(--border-color);
+}
+
+.results-table td {
+    padding: 1rem;
+    border-bottom: 1px solid var(--border-light);
+    vertical-align: middle;
+}
+
+.results-table tr:hover {
+    background: var(--bg-secondary);
+}
+
+.repo-link {
+    text-decoration: none;
+    color: var(--text-primary);
+    font-weight: 500;
+    transition: color 0.3s ease;
+}
+
+.repo-link:hover {
+    color: var(--primary-color);
+}
+
+.repo-owner {
+    color: var(--text-secondary);
+    font-weight: 400;
+}
+
+.star-count {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    color: var(--text-secondary);
+}
+
+.issue-count {
+    background: var(--primary-color);
+    color: white;
+    padding: 0.25rem 0.75rem;
+    border-radius: 9999px;
+    font-size: 0.875rem;
+    font-weight: 600;
+}
+
+/* Loading Spinner */
+.loading-spinner {
+    display: none;
+    text-align: center;
+    padding: 4rem;
+}
+
+.spinner {
+    display: none;
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    z-index: 1;
+    width: 150px;
+    height: 150px;
+    margin: -75px 0 0 -75px;
+    border: 16px solid #f3f3f3;
+    border-radius: 50%;
+    border-top: 16px solid #3498db;
+    width: 120px;
+    height: 120px;
+    -webkit-animation: spin 2s linear infinite;
+    animation: spin 2s linear infinite;
+}
+
+.loading-spinner .spinner {
+    display: block;
+    position: relative;
+    left: auto;
+    top: auto;
+    margin: 0 auto 1rem;
+}
+
+/* Empty State */
+.empty-state {
+    text-align: center;
+    padding: 4rem 2rem;
+    color: var(--text-secondary);
+}
+
+.empty-state i {
+    font-size: 4rem;
+    margin-bottom: 1rem;
+    opacity: 0.5;
+}
+
+/* Animations */
+@keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+}
+
+@-webkit-keyframes spin {
+    0% { -webkit-transform: rotate(0deg); }
+    100% { -webkit-transform: rotate(360deg); }
+}
+
+@keyframes fadeIn {
+    from { 
+        opacity: 0; 
+        transform: translateY(20px); 
+    }
+    to { 
+        opacity: 1; 
+        transform: translateY(0); 
+    }
+}
+
+/* Responsive Design */
+@media (max-width: 768px) {
+    .hero {
+        padding: 2rem 1rem;
+    }
+    
+    .search-container {
+        padding: 1.5rem;
+    }
+    
+    .labels-showcase {
+        gap: 0.5rem;
+    }
+    
+    .sort-buttons {
+        flex-direction: column;
+    }
+    
+    .results-table {
+        font-size: 0.875rem;
+    }
+    
+    .results-table th,
+    .results-table td {
+        padding: 0.75rem 0.5rem;
+    }
+    
+    .table {
+        width: 100%;
+    }
+}
\ No newline at end of file
diff --git a/index.html b/index.html
index 1f6f9d4a..2f07b60b 100644
--- a/index.html
+++ b/index.html
@@ -1,683 +1,415 @@
-<!doctype html>
-<html>
-	<head>
-	<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
-	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
-<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
-	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
-	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
-	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/css/bootstrap-select.css" />
-	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
-	<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js"></script>
-	<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/js/bootstrap-select.min.js"></script>
-
-	</head>
-<style>
-
-body {
-        background-color: rgba(250, 251, 254, 1.0);
-}
-
-.IssueLabel {
-    height: 20px;
-    padding: 0.15em 6px;
-    font-size: 14px;
-    font-weight: 600;
-    line-height: 15px;
-    border-radius: 2px;
-    box-shadow: inset 0 -1px 0 rgba(27,31,35,0.12);
-}
-
-.GoodFirstIssue {
-	background-color: #7057ff;
-	color: #ffffff;
-}
-
-.StarterTask {
-    background-color: #62dbc9;
-    color: #000000;
-}
-
-.HelpWanted {
-    background-color: #008672;
-    color: #ffffff;
-}
-
-.search-body {
-background-color: #ffffff;
-box-shadow: 0 0 35px 0 rgba(154, 161, 171, .15);
-border: 1px solid rgba(154, 161, 171, .15);
-}
-
-
-.spinner {
-  display: none;
-  position: absolute;
-  left: 50%;
-  z-index: 1;
-  width: 120px;
-  height: 120px;
-  margin: -75px 0 0 -75px;
-  border: 16px solid #f3f3f3;
-  border-radius: 50%;
-  border-top: 16px solid #7057ff;
-  -webkit-animation: spin 2s linear infinite;
-  animation: spin 2s linear infinite;
-}
-
-
-@-webkit-keyframes spin {
-  0% { -webkit-transform: rotate(0deg); }
-  100% { -webkit-transform: rotate(360deg); }
-}
-
-.btn-primary {
-    color: #fff;
-    background-color: #0073e6;
-    border-color: #0073e6;
-}
-
-.btn {
-    display: inline-block;
-    font-weight: 400;
-    line-height: 1.25;
-    text-align: center;
-    white-space: nowrap;
-    vertical-align: middle;
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-    user-select: none;
-    border: 1px solid transparent;
-    padding: .5rem 1rem;
-    font-size: 1rem;
-    border-radius: .25rem;
-}
-
-.welcome {
-    margin-bottom: 2rem;
-    margin-top: 1.5rem;
-    font-family: 'Lato', sans-serif;
-}
-
-
-.hidden {
-display: none;
-}
-
-.welcome {
-}
-
-.welcome h1 {
-    font-weight: 700;
-}
-
-.lead {
-    margin-bottom: 0.775rem !important;
-}
-
-.form-header {
-	margin-left: 15px;
-	margin-top: 0.75rem;
-	margin-bottom: 2rem;
-}
-
-.TopLabel {
-	margin-top: 8px;
-	margin-left: 8px;
-}
-
-.custom-select {
-    display: inline-block;
-    max-width: 100%;
-    height: calc(2.25rem + 2px);
-    padding: .375rem 1.75rem .375rem .75rem;
-    line-height: 1.25;
-    color: #464a4c;
-    vertical-align: middle;
-    background: #fff url(data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' v…'0 0 4 5'%3E%3Cpath fill='%23333' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E) no-repeat right .75rem center;
-    -webkit-background-size: 8px 10px;
-    background-size: 8px 10px;
-    border: 1px solid rgba(0,0,0,.15);
-    border-radius: .25rem;
-    -moz-appearance: none;
-    -webkit-appearance: none;
-}
-
-.QuestionsSuggestions  {
-	margin-top: 1rem;
-	margin-bottom: 1rem;
-	font-size: 0.8rem;
-}
-
-.text-muted {
-color: #636c72;
-margin-bottom: 0px;
-font-weight: 300;
-font-size: 90%;
-margin-right: 6px;
-}
-
-.paddedLeftMargin {
-margin-left: 25px;
-}
-
-#submit {
-margin-left: 25px;
-width: 300px;
-}
-
-.sortsTable:hover {
-color: #7057ff;
-cursor: url(hand.cur), pointer;
-}
-
-
-</style>
-
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Good First Issue - Find Great Open Source Opportunities</title>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <link rel="stylesheet" href="css/style.css">
+</head>
 <body>
-     	<p class="TopLabel"><label class="IssueLabel GoodFirstIssue">Good First Issue</label>.com</p>
-	<div class="container-fluid hidden-sm-down">
-	<div class="row">
-	<div class="col-md-12 text-center QuestionsSuggestions">
-	<span class="news">Questions? Suggestions? <a class="center-block" target="_blank" href="https://twitter.com/messages/compose?recipient_id=966086645111025665">Send me a PM</a> on <i class="fa fa-twitter" aria-hidden="true"></i></span>
-	</div>
-	</div>
-	</div>
-
-	<span class="octicon octicon-clippy"></span>
-	<div class="container welcome">
-		<div class="row d-block">
-		<h1>Find Great Open Source Opportunities.</h1>
-		<p class="lead">Made for new contributors to find great Open Source projects.</p>
-		<p>Discover Issues and Repositories with <label class="IssueLabel HelpWanted">Help Wanted</label> <label class="IssueLabel StarterTask">Starter Task</label> and <Label class="IssueLabel GoodFirstIssue">Good First Issue</label> labels. </p>
-		</div>
-	</div>
-
-	<div class="container search-body">
-  		<div class="row">
-				<div class = 'form-header'>
-				<form class="QueryParametersForm form-inline" onsubmit="onSubmitButton();return false;">
-						<select class="LanguageOptions form-control" onchange="onSubmitButton()">
-							<option>Choose Language</option>
-							<option value="ActionScript">ActionScript</option>
-							<option value="C">C</option>
-							<option value="C#">C#</option>
-							<option value="C++">C++</option>
-							<option value="Clojure">Clojure</option>
-							<option value="CoffeeScript">CoffeeScript</option>
-							<option value="CSS">CSS</option>
-							<option value="Go">Go</option>
-							<option value="Haskell">Haskell</option>
-							<option value="HTML">HTML</option>
-							<option value="Java">Java</option>
-							<option value="JavaScript">JavaScript</option>
-							<option value="Lua">Lua</option>
-							<option value="Matlab">Matlab</option>
-							<option value="Objective-C">Objective-C</option>
-							<option value="Perl">Perl</option>
-							<option value="PHP">PHP</option>
-							<option value="Python">Python</option>
-							<option value="R">R</option>
-							<option value="Ruby">Ruby</option>
-							<option value="Scala">Scala</option>
-							<option value="Shell">Shell</option>
-							<option value="Swift">Swift</option>
-							<option value="TeX">TeX</option>
-							<option value="Vim script">Vim script</option>
-						</select>
-					</form>
-				</div>
-
-		<div class="table-responsive">
-		<div class="spinner"></div>
-		<table class="table hidden">
-			<col width="40%">
-			<col width="20%">
-			<col width="20%">
-			<col width="20%">
-			<thead>
-				<tr>
-				<th>Repository</th>
-				<th class="sortsTable" value="Good First Issue">Good First Issues</th>
-				<th class="sortsTable" value="Stars">Stars</th>
-				<th>Last Update</th>
-				</tr>
-			</thead>
-			<tbody>
-			</tbody>
-		</table>
-		</div>
-
-		</div>
-		</div>
-	</div>
-
-
-<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
-<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
-<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
-</body>
-</html>
-
-<script>
-
-
-var searchIssuesQuery  = `
-query SearchIssues($query:String!, $after: String) {
-  search(query:$query, type:ISSUE, first: 100, after: $after) {
-    edges {
-    	node {
-        ... on Issue {
-         repository {
-	   owner {
-		login
-	   },
-	   updatedAt,
-	   url,
-	updatedAt,
-           name,
-	   stargazers {
-		totalCount
-         	},
-           },
-           url,
-	   createdAt,
-        }
-      }
-    }
-
-    pageInfo {
-      endCursor
-      hasNextPage
-    }
-  }
-}
-
-`
-
-
-class RepositoryContainer {
-        constructor(issue) {
-                this.owner = issue.repository.owner.login
-                this.name = issue.repository.name
-                this.starcount = issue.repository.stargazers.totalCount
-                this.issues = [ issue ]
-                this.url = issue.repository.url
-                this.updatedAt = issue.repository.updatedAt
-        }
-
-        addIssue(issue) {
+    <header class="header">
+        <div class="header-content">
+            <div class="logo">
+                <span class="badge">Good First Issue</span>
+                <span>.com</span>
+            </div>
+            <a href="https://twitter.com/messages/compose?recipient_id=966086645111025665" target="_blank" class="contact-link">
+                <i class="fab fa-twitter"></i>
+                <span>Questions? Send a PM</span>
+            </a>
+        </div>
+    </header>
+
+    <section class="hero">
+        <h1>Find Great Open Source Opportunities</h1>
+        <p>Made for new contributors to find great Open Source projects</p>
+        <div class="labels-showcase">
+            <span class="issue-label good-first-issue">Good First Issue</span>
+            <span class="issue-label starter-task">Starter Task</span>
+            <span class="issue-label help-wanted">Help Wanted</span>
+        </div>
+    </section>
+
+    <main class="main-content">
+        <div class="search-container">
+            <form class="search-form" onsubmit="onSubmitButton(); return false;">
+                <div class="form-group">
+                    <label for="language-select" class="form-label">
+                        <i class="fas fa-code"></i> Choose Programming Language
+                    </label>
+                    <select id="language-select" class="form-select language-options" onchange="onSubmitButton()">
+                        <option value="">Select a language...</option>
+                        <option value="ActionScript">ActionScript</option>
+                        <option value="C">C</option>
+                        <option value="C#">C#</option>
+                        <option value="C++">C++</option>
+                        <option value="Clojure">Clojure</option>
+                        <option value="CoffeeScript">CoffeeScript</option>
+                        <option value="CSS">CSS</option>
+                        <option value="Go">Go</option>
+                        <option value="Haskell">Haskell</option>
+                        <option value="HTML">HTML</option>
+                        <option value="Java">Java</option>
+                        <option value="JavaScript">JavaScript</option>
+                        <option value="Lua">Lua</option>
+                        <option value="Matlab">Matlab</option>
+                        <option value="Objective-C">Objective-C</option>
+                        <option value="Perl">Perl</option>
+                        <option value="PHP">PHP</option>
+                        <option value="Python">Python</option>
+                        <option value="R">R</option>
+                        <option value="Ruby">Ruby</option>
+                        <option value="Scala">Scala</option>
+                        <option value="Shell">Shell</option>
+                        <option value="Swift">Swift</option>
+                        <option value="TeX">TeX</option>
+                        <option value="Vim script">Vim script</option>
+                    </select>
+                </div>
+            </form>
+        </div>
+
+        <div class="results-container hidden" id="results-container">
+            <div class="results-header">
+                <h2>Open Source Repositories</h2>
+                <p>Click on any repository to explore the issues</p>
+                <div class="sort-buttons">
+                    <button class="sort-btn btn btn-primary active" data-sort="Good First Issue">
+                        <i class="fas fa-fire"></i>
+                        Most Issues
+                    </button>
+                    <button class="sort-btn btn btn-primary" data-sort="Stars">
+                        <i class="fas fa-star"></i>
+                        Most Stars
+                    </button>
+                </div>
+            </div>
+            
+            <div class="loading-spinner" id="loading-spinner">
+                <div class="spinner"></div>
+                <p>Searching for great repositories...</p>
+            </div>
+
+            <div class="table-container">
+                <table class="table results-table hidden" id="results-table">
+                    <thead>
+                        <tr>
+                            <th style="width: 40%">Repository</th>
+                            <th style="width: 20%">Good First Issues</th>
+                            <th style="width: 20%">Stars</th>
+                            <th style="width: 20%">Last Update</th>
+                        </tr>
+                    </thead>
+                    <tbody></tbody>
+                </table>
+            </div>
+
+            <div class="empty-state hidden" id="empty-state">
+                <i class="fas fa-search"></i>
+                <h3>No repositories found</h3>
+                <p>Try selecting a different programming language</p>
+            </div>
+        </div>
+    </main>
+
+    <script>
+        // GitHub GraphQL Query
+        const searchIssuesQuery = `
+            query SearchIssues($query: String!, $after: String) {
+                search(query: $query, type: ISSUE, first: 100, after: $after) {
+                    edges {
+                        node {
+                            ... on Issue {
+                                repository {
+                                    owner {
+                                        login
+                                    },
+                                    updatedAt,
+                                    url,
+                                    name,
+                                    stargazers {
+                                        totalCount
+                                    },
+                                },
+                                url,
+                                createdAt,
+                            }
+                        }
+                    }
+                    pageInfo {
+                        endCursor
+                        hasNextPage
+                    }
+                }
+            }
+        `;
+
+        // Repository Container Class
+        class RepositoryContainer {
+            constructor(issue) {
+                this.owner = issue.repository.owner.login;
+                this.name = issue.repository.name;
+                this.starcount = issue.repository.stargazers.totalCount;
+                this.issues = [issue];
+                this.url = issue.repository.url;
+                this.updatedAt = issue.repository.updatedAt;
+            }
+
+            addIssue(issue) {
                 this.issues.push(issue);
+            }
         }
-}
-
-function sortByGoodFirstIssues(repos) {
-
-       function compare(a, b) {
-           return returnComp(a.issues.length, b.issues.length, a.starcount, b.starcount) 
-	};
-
-
-        repos.sort(compare);
-	return repos; 
-}
-
-function returnComp(a, b,  tiebreaker1, tiebreaker2) {
-		
-
-	if (a > b) {
-            return -1;          
-        } else if (b > a) {
-            return 1;
-       	} else if (tiebreaker1 > tiebreaker2) {
-	    return -1 
-	} else if (tiebreaker2 > tiebreaker1) {
-	    return 1; 
-	}
-
-	return 0
-}
-
-
-function sortByStars(repos) {
-	function compare(a, b) {
-		return returnComp(a.starcount, b.starcount, a.issues.length, b.issues.length)
-        };
-
-        repos.sort(compare);
-        return repos;
-}
-
 
-function sortBy(value, repositories) {
+        // Utility Functions
+        function sortByGoodFirstIssues(repos) {
+            return repos.sort((a, b) => {
+                if (a.issues.length !== b.issues.length) {
+                    return b.issues.length - a.issues.length;
+                }
+                return b.starcount - a.starcount;
+            });
+        }
 
-	switch (value) {
+        function sortByStars(repos) {
+            return repos.sort((a, b) => {
+                if (a.starcount !== b.starcount) {
+                    return b.starcount - a.starcount;
+                }
+                return b.issues.length - a.issues.length;
+            });
+        }
 
+        function sortBy(value, repositories) {
+            switch (value) {
                 case "Good First Issue":
-                       	return sortByGoodFirstIssues(repositories); 
-			break;
-
+                    return sortByGoodFirstIssues(repositories);
                 case "Stars":
-			return sortByStars(repositories); 
-                        break; 
-
+                    return sortByStars(repositories);
+                default:
+                    return repositories;
+            }
         }
 
-}
-
-
-function addSlashes(string) {
-	var slash = "\"";
-	return slash + string + slash
-}
-
-
-function makeIssuesQuery(language, label, endCursor) {
-	return {
-		query:
-			"label:" + addSlashes(label) + " language:" + language + " " + "state:open",
-			"after": endCursor,
-	}
-}
-
-
-function getHTMLParameters() {
-	// get language
-	var langOptions = $(".LanguageOptions")[0];
-	var selectedLanguage = langOptions[langOptions.selectedIndex].value
-		console.log(selectedLanguage);
-	// get labels
-
-	return {
-		language: selectedLanguage
-	}
-
-}
-
-
-function daysBetweenDates(date1, date2) {
-	var oneDay = 24*60*60*1000;	// hours*minutes*seconds*milliseconds
-	var diffDays = Math.round((date2-date1)/oneDay);
-	return diffDays;
-}
-
-
-function afterDateLimit(date, todaysDate, monthLimit) {
-	var dayLimit = monthLimit * 30;
-	var daysBtwn =  daysBetweenDates(date, todaysDate);
-	return daysBtwn >= dayLimit
-}
-
+        function makeIssuesQuery(language, label, endCursor) {
+            return {
+                query: `label:"${label}" language:${language} state:open`,
+                after: endCursor,
+            };
+        }
 
-function isUndefined(object) {
-	return (typeof object === "undefined");
-}
+        function getHTMLParameters() {
+            const langOptions = document.querySelector('.language-options');
+            const selectedLanguage = langOptions.value;
+            return { language: selectedLanguage };
+        }
 
+        function daysBetweenDates(date1, date2) {
+            const oneDay = 24 * 60 * 60 * 1000;
+            const diffDays = Math.round((date2 - date1) / oneDay);
+            return diffDays;
+        }
 
-function createContainers(issues, repoDict, repoNameDict) {
-        issues.forEach(i=>{
-		if (isUndefined(i)) { return; };
-		if (isUndefined(i.repository)) { return; }
-		var name = i.repository.name
+        function afterDateLimit(date, todaysDate, monthLimit) {
+            const dayLimit = monthLimit * 30;
+            const daysBtwn = daysBetweenDates(date, todaysDate);
+            return daysBtwn >= dayLimit;
+        }
 
-                if (isUndefined(repoNameDict[name])) {
-                        repoNameDict[name] = name;
-                        var container = new RepositoryContainer(i);
-			repoDict[name] = container;
+        function createContainers(issues, repoDict, repoNameDict) {
+            issues.forEach(issue => {
+                if (!issue || !issue.repository) return;
+                
+                const name = issue.repository.name;
+                if (!repoNameDict[name]) {
+                    repoNameDict[name] = name;
+                    const container = new RepositoryContainer(issue);
+                    repoDict[name] = container;
                 } else {
-                        repoDict[name].addIssue(i);
+                    repoDict[name].addIssue(issue);
                 }
-	});
-
-	var arrayvalues = new Array();
-
-	for (var key in repoDict) {
-    		arrayvalues.push(repoDict[key]);
-	}
-
-	return arrayvalues
-}
-
-
-function createTable(issues) {
-	console.log("***** create table called ****");
- 	var repoNameDict = {};
-        var repoDict = {};
-	var body = document.getElementsByTagName("body")[0];
-	var allRepositories = createContainers(issues, repoDict, repoNameDict);
-
-	sortByGoodFirstIssues(allRepositories); 
-	makeTableFromRepos(allRepositories); 
-	return allRepositories 
-};
-
-
-function makeTableFromRepos(repositories) {
-     makeTableElement(); 	
-     repositories.forEach(i=>{
-         var row = insertIntoTableElement(i.owner, i.name, i.url, i.issues.length, i.starcount, i.updatedAt);
-         $('table tbody')[0].appendChild(row);
-     })
-}
-
-
-function removeRows(table) {
-	$('table tbody tr').remove();
-}
-
+            });
 
-function makeTableElement() {
+            return Object.values(repoDict);
+        }
 
-        // create elements <table> and a <tbody>
-        var table = $('table')[0];
-	table.classList.remove('hidden');
-	removeRows(table);
-}
+        function formatUpdatedAtDate(updatedAt) {
+            const date = new Date(updatedAt);
+            const monthNames = [
+                "Jan", "Feb", "Mar", "Apr", "May", "Jun",
+                "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"
+            ];
+            
+            const day = date.getDate();
+            const monthIndex = date.getMonth();
+            const year = date.getFullYear();
+            
+            return `${monthNames[monthIndex]} ${day}, ${year}`;
+        }
 
+        function createTableRow(repo) {
+            const row = document.createElement('tr');
+            row.className = 'fade-in';
+            
+            row.innerHTML = `
+                <td>
+                    <a href="${repo.url}" target="_blank" class="repo-link">
+                        <span class="repo-owner">${repo.owner}</span> / <strong>${repo.name}</strong>
+                    </a>
+                </td>
+                <td>
+                    <span class="issue-count">${repo.issues.length}</span>
+                </td>
+                <td>
+                    <div class="star-count">
+                        <i class="fas fa-star"></i>
+                        <span>${repo.starcount.toLocaleString()}</span>
+                    </div>
+                </td>
+                <td>${formatUpdatedAtDate(repo.updatedAt)}</td>
+            `;
+            
+            return row;
+        }
 
-function appendCell(row, text) {
-	var cell = document.createElement("td");
-	var celltext = document.createTextNode(text);
-	cell.appendChild(celltext);
-	row.appendChild(cell);
-}
+        function makeTableFromRepos(repositories) {
+            const tableBody = document.querySelector('#results-table tbody');
+            tableBody.innerHTML = '';
+            
+            repositories.forEach(repo => {
+                const row = createTableRow(repo);
+                tableBody.appendChild(row);
+            });
+        }
 
+        function showLoading() {
+            document.getElementById('loading-spinner').style.display = 'block';
+            document.getElementById('results-table').classList.add('hidden');
+            document.getElementById('empty-state').classList.add('hidden');
+        }
 
-function formatNameCell(repoOwnerLogin, repoName, url, row) {
-	var cell = document.createElement("td");
-	var span = document.createElement("span");
-	var a = document.createElement("a");
-	var loginText = document.createTextNode(repoOwnerLogin + " / ");
-	var repoNameText = document.createTextNode(repoName);
+        function hideLoading() {
+            document.getElementById('loading-spinner').style.display = 'none';
+        }
 
-	a.appendChild(loginText);
-	$(a).attr("href", url);
-	$(a).attr("target", "_blank");
-	a.classList.add("ownerLoginText");
-	a.appendChild(repoNameText);
+        function showResults(repositories) {
+            hideLoading();
+            
+            if (repositories.length === 0) {
+                document.getElementById('empty-state').classList.remove('hidden');
+                document.getElementById('results-table').classList.add('hidden');
+            } else {
+                document.getElementById('empty-state').classList.add('hidden');
+                document.getElementById('results-table').classList.remove('hidden');
+                makeTableFromRepos(repositories);
+            }
+        }
 
-	cell.appendChild(a);
-	row.appendChild(cell);
-}
+        function setupSortButtons(repositories) {
+            const sortButtons = document.querySelectorAll('.sort-btn');
+            
+            sortButtons.forEach(btn => {
+                btn.addEventListener('click', () => {
+                    // Update active state
+                    sortButtons.forEach(b => b.classList.remove('active'));
+                    btn.classList.add('active');
+                    
+                    // Sort and display
+                    const sortValue = btn.getAttribute('data-sort');
+                    const sortedRepos = sortBy(sortValue, [...repositories]);
+                    makeTableFromRepos(sortedRepos);
+                });
+            });
+        }
 
+        // Note: This is a placeholder token - you'll need to replace with a real GitHub token
+        const token = 'YOUR_GITHUB_TOKEN_HERE';
 
-function formatUpdatedAtDate(updatedAt) {
-  var date = new Date(updatedAt);
-  var monthNames = [
-   	 "Jan", "Feb", "May",
-   	 "Apr", "May", "June", "July",
-   	 "Aug", "Sept", "Oct",
-   	 "Nov", "Dec"
-  ];
-
-  var day = date.getDate();
-  var monthIndex = date.getMonth();
-  var year = date.getFullYear();
-
-  return monthNames[monthIndex] +  ' ' + day + ' ' + year;
-}
-
-
-function appendStarCell(row, stars) {
-	var cell = document.createElement("td");
-	var starSVG = starSVGIcon();
-	var p1 = "<p>";
-	var p2 = "</p>";
-	var space = " ";
-	$(cell).html(p1 + starSVG + space + stars + p2);
-        row.appendChild(cell);
-}
-
-
-function insertIntoTableElement(repoOwnerLogin, repoName, url,  issueCount, stars, updatedAt) {
-	var row = document.createElement("tr");
-	formatNameCell(repoOwnerLogin, repoName, url, row);
-	appendCell(row, issueCount);
-	appendStarCell(row, stars);
-	appendCell(row, formatUpdatedAtDate(updatedAt));
-	return row;
-}
-
-
-function throwLoading(spinner) {
-	spinner.css("display", "block");
-	console.log("throwing loading spinner");
-}
-
-
-function stopLoadingSpinner(spinner, time) {
-
-	function stopLoading() {
-		spinner.css("display", "none");
-	}
-
-	console.log(time);
-	var now = new Date().getTime();
-	console.log(now);
-	var interval = new Date().getTime() - time
-	console.log(interval);
-	spinner.css("display", "none");
-}
-
-function starSVGIcon() {
-	return '<svg aria-label="star" style="margin-top: -5px" viewBox="0 0 14 16" version="1.1" width="14" height="16" role="img"><path fill-rule="evenodd" d="M14 6l-4.9-.64L7 1 4.9 5.36 0 6l3.6 3.26L2.67 14 7 11.67 11.33 14l-.93-4.74L14 6z"></path></svg>'
-}
-
-
-
-function onSubmitButton() {
-
-	var parameters = getHTMLParameters();
-	if (parameters.language == "") {
-		return;
-	}
-
-	var time = new Date().getTime()
-	var spinner = $('.spinner')
-	throwLoading(spinner);
-	var fetchCount = 0;
-	var labels = ["easy contribution", "good first issue", "starter-task"];
-	var todaysDate = new Date();
-	var issuesFetched = [];
-	var uniqueRepositories = []
-	var labelIndex = 0;
-
-	function setupSortMech(repos) {
-		$(".sortsTable").click(function() {
-			console.log("seen ");	
-                	var value = $(this).attr('value');
-			var sortedRepos = sortBy(value, repos); 
-			makeTableFromRepos(sortedRepos); 
-		});
-
-	}
-
-	function finishedFetchingRepos() {
-		console.log("finished " + issuesFetched.length);
-                stopLoadingSpinner(spinner, new Date().getTime());
-                console.log("finished " + issuesFetched.length);
-                var repos = createTable(issuesFetched);
-		setupSortMech(repos); 
-	}
-
-	function makeQuery(endCursor) {
-		var query = makeIssuesQuery(parameters.language, labels[labelIndex], endCursor);
-		fetchQuery(searchIssuesQuery, query, handleData );
-	}
-
-	function fetchNextPage(fetchCount, pageInfo) {
-		 // { "query": "label:\"good first issue\" ", "after": "Y3Vyc29yOjg="}
-		fetchCount += 1;
-		makeQuery(pageInfo.endCursor)
-	}
-
-	function fetchNextLabel() {
-             labelIndex += 1;
-             if (labelIndex >= labels.length) {
-                     finishedFetchingRepos(); 
-	     } else {
-                     makeQuery();
-             }
-	}
-
-	function handleData(data) {
-
-		if (data == null || data.data == null) {
-			fetchNextLabel();
-			return;
-		}
-
-		var issues = data.data.search.edges.map(edge=>{ return edge.node  });
-		console.log(issues.length);
-		issuesFetched = issuesFetched.concat(issues);
-		console.log(issuesFetched.length);
-		var pageInfo = data.data.search.pageInfo;
-
-		var i = 0;
-
-		for (i = issues.length; i >= 0; i--) {
-			if (isUndefined(issues[i])) {
-				issues.splice(i, 1);
-			}
-		}
-
-		if (issues.length == 0) {
-			fetchNextLabel();
-		} else if (pageInfo.hasNextPage && !afterDateLimit( new Date(issues[issues.length - 1].createdAt ), todaysDate, 4)) {
-			fetchNextPage(fetchCount, pageInfo);
-		} else {
-			fetchNextLabel();
-		}
-	}
-
-	makeQuery();
-}
-
-
-function fetchQuery(query, variables, callback)  {
-	//https://graphql.org/graphql-js/graphql-clients/
-
-	var body = JSON.stringify({
+        function fetchQuery(query, variables, callback) {
+            const body = JSON.stringify({
                 query,
                 variables: variables,
-	});
-
+            });
+
+            fetch('https://api.github.com/graphql', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                    'Accept': 'application/json',
+                    'Authorization': `Bearer ${token}`,
+                },
+                body: body
+            })
+            .then(r => r.json())
+            .then(data => callback(data))
+            .catch(error => {
+                console.error('Error fetching data:', error);
+                callback(null);
+            });
+        }
 
-	fetch('https://api.github.com/graphql',
-	{
-        	method: 'POST',
-        	headers: {
-                	'Content-Type': 'application/json',
-                	'Accept': 'application/json',
-                	'Authorization': 'Bearer' + ' ' + token,
-        	},
-        	body: body
+        function onSubmitButton() {
+            const parameters = getHTMLParameters();
+            if (!parameters.language) {
+                return;
+            }
+
+            // Show results container
+            document.getElementById('results-container').classList.remove('hidden');
+            showLoading();
+
+            const labels = ["easy contribution", "good first issue", "starter-task"];
+            const todaysDate = new Date();
+            const issuesFetched = [];
+            let labelIndex = 0;
+
+            function makeQuery(endCursor) {
+                const query = makeIssuesQuery(parameters.language, labels[labelIndex], endCursor);
+                fetchQuery(searchIssuesQuery, query, handleData);
+            }
+
+            function fetchNextLabel() {
+                labelIndex += 1;
+                if (labelIndex >= labels.length) {
+                    finishedFetchingRepos();
+                } else {
+                    makeQuery();
+                }
+            }
+
+            function finishedFetchingRepos() {
+                const repoDict = {};
+                const repoNameDict = {};
+                const repositories = createContainers(issuesFetched, repoDict, repoNameDict);
+                const sortedRepos = sortByGoodFirstIssues(repositories);
+                
+                showResults(sortedRepos);
+                setupSortButtons(sortedRepos);
+            }
+
+            function handleData(data) {
+                if (!data || !data.data) {
+                    fetchNextLabel();
+                    return;
+                }
 
-	}).then(r => r.json()).then(data => {
-    		callback(data);
-	});
-}
+                const issues = data.data.search.edges.map(edge => edge.node).filter(issue => issue && issue.repository);
+                issuesFetched.push(...issues);
+                
+                const pageInfo = data.data.search.pageInfo;
 
+                if (issues.length === 0) {
+                    fetchNextLabel();
+                } else if (pageInfo.hasNextPage && issues.length > 0 && !afterDateLimit(new Date(issues[issues.length - 1].createdAt), todaysDate, 4)) {
+                    makeQuery(pageInfo.endCursor);
+                } else {
+                    fetchNextLabel();
+                }
+            }
 
-</script>
+            makeQuery();
+        }
+    </script>
+</body>
+</html>
\ No newline at end of file